Create you First Flutter Application

Creating your first flutter Application

Introduction

Before getting started make sure you have installed the following. Here is a link to guide you during installation

• Downloading and setting the path of JAVA.
• Downloading and setting the path of Android SDK.
• Installing Flutter in Linux and setting the path.
• optional(you can install vs-code to run your code if your machine is slow)
• Run flutter doctor to ensure everything runs well

when you run flutter doctor you should get this log

With this you are ready to get started.

Create a new application

VsCode

1. Invoke View > Command Palette on your menu.

2. Type “flutter”, and select the Flutter: New Project.

3. Select Application.

4. Create or select the parent directory for the new project folder.

5. Enter a project name, such as my_app, and press Enter. Flutter project is case sensitive

6. Wait for project creation to complete and the main.dart file to appear.

Android Studio

1. Open android studio
2. File> New > new Flutter Project >Flutter
3. Add project name and description. The name is case sensitive, use lower case and join two words using underscore.
4. Finish. You can select new window if you want to create the project in a new page.

Hello world App

A simple hello world program

This is the main class which will call other classes. You can add your hello class here if you like but i prefer creating it separately.

N.B File name should be in lower case

create myhomepage class to display hello world

breakdown of the widget hierarchy

From the example above we can see that myhomepage class extends a stateless widget. Statelesswidget is a widget that does not require mutable state. It’s useful when part of the user interface you are describing does not depend on anything other than the configuration information in the object itself.

Widget everything in flutter is called a widget.

State is (1) anything that exist in the memory while the app is running or (2)whatever data you need in-order to rebuild UI at any given time or (3) information that is read synchronously when the widget is build and might change during the lifetime of the widget.

StatefulWidget is a widget that has mutable state. It is useful when part of the user interface you are describing can change dynamically.

Categories of Widgets in flutter

• Platform specific widgets

Scaffold, AppBar, BottomNavigationBar, TabBar, TabBarView, ListTile, RaisedButton, FloatingActionButton, FlatButton, IconButton, DropdownButton, PopupMenuButton, ButtonBar, TextField, Checkbox, Radio, Switch, Slider, Date & Time Pickers, SimpleDialog, AlertDialog

Cupertino widgets

CupertinoButton, CupertinoPicker, CupertinoDatePicker, CupertinoTimerPicker, CupertinoNavigationBar, CupertinoTabBar, CupertinoTabScaffold,CupertinoTabView, CupertinoTextField, CupertinoDialog,CupertinoDialogAction,CupertinoFullscreenDialogTransition, CupertinoPageScaffold, CupertinoPageTransition, CupertinoActionSheet, CupertinoActivityIndicator, CupertinoAlertDialog, CupertinoPopupSurface, CupertinoSlider

• Layout widgets

Container(rectangular box with BoxDecoration), Center(Center child widget), Row(Arrange children in horizontal), Slack(Arrange one above the other)

• State maintenance widgets

Statefull widget,

Stateless widget(does not have a state but may contain a widget derived from StatefulWidget)

• Platform independent / basic widgets

Text, Icon, Image

Different constructors to load images from multiple sources:

Image- generic image loader using ImageProvider.

Image.Asset- load image from flutter project’s assets.

Image.file- load image from system folder.

Image.memory- load image from memory.

Image.Network- load image from network.

Types of Layout Widgets

1. Single child

FittedBox, AspectRatio, ConstrainedBox, Baseline, FractinallySizedBox, IntrinsicHeight, IntrinsicWidth, LiimitedBox, OffStage, OverflowBox, SizedBox, SizedOverflowBox, Transform, CustomSingleChildLayout, Container, BoxDecoration, padding, Center

2.Multiple widget

Row, column, ListView, GridView, Expanded, Table, Flow, Stack

Widely used gestures

Gestures are a way for a user to interact with a mobile or any touch based device application. Tapping the screen of mobile for more complex action. Some of the widely used gestures:

Tap, Double Tap, Drag, Flick, Pinch, Spread/zoom, panning

State Management

There are two categories of statemanagement:

1. Ephemeral -last for a few seconds.
2. App state- last for entire application.

Navigation and Routing

here is a tutorial on routing in flutter

Open a browser on button tap

//This function launches the url on the browser
Future<void> openBrowser() async {
final Uri _url = Uri.parse('https://flutter.io');
   if (!await launchUrl(_url)) throw 'Could not launch $_url';
}

call the function on button tap

Accessing REST API

Flutter provides http package that consumes HTTP resources. It is a future based library and uses await and async features.

• read − Request the specified url through GET method and return back the response as Future<String>
• get − Request the specified url through GET method and return back the response as Future<Response>. Response is a class holding the response information.
• post − Request the specified url through POST method by posting the supplied data and return back the response as Future<Response>
• put − Request the specified url through PUT method and return back the response as Future <Response>
• head − Request the specified url through HEAD method and return back the response as Future<Response>
• delete − Request the specified url through DELETE method and return back the response as Future<Response>

This is just a small over view.