Currently some part of the Android SDK requires Java 8.

The Android SDK requires you to sign SDK package licenses. This is relevant for publishing the app, but $ flutter doctor will nag you about this. You can run the command $ flutter doctor --android-licenses to view and accept the licenses.

To test your installation run the $ flutter doctor command.

The output should look like this:

If you are on Linux (Ubuntu, Fedora, Arch, etc.) you might need to install an additional package. The output of $ flutter doctor will show you the following message:

The emulator can be a powerful replacement of a physical Android device for testing mobile applications.

Before setting it up it is advisable to enable VM Acceleration on your development machine. This can sometimes drastically improve performance of the emulator.

Emulators can be created in Android Studio or via VSCode. The Flutter tools can start the emulator for you.

If you already have a project in Android Studio, click on Tools  AVD Manager.

Once open, click on + Create Virtual Device.

You will be presented with a list of devices available for emulation. These cover most of what is available. For this purpose it is not important which device you choose. Just keep in mind, that the devices have different aspect-ratios and resolutions. As a result your layout might look different to what is presented in this series.

The next step is to choose an Android version. At the time of writing this is Android Q, but for Flutter apps there is not much of a difference. For more production-ready apps however, you should check your app for inconsistencies across your supported versions.

On the next page you can name your device. It is advisable to choose a name you recognize, as you will have to choose the correct device to run your Flutter apps on.

You can close the AVD Manager now.

To check if the emulator is available, run the $ flutter doctor command again. There should be 1 connected device:

[✓] Connected device (1 available)

Flutter allows to use your physical android device as a debug target. To enable this functionality you need to enable ADB debugging on the device. This setting can be found in the developer options of your phone.

Open the settings app on the phone and go to About Phone and tap Build Number seven times. This enables a sub menu in the settings app.

Go to Developer options at the bottom and enable USB-Debugging.

Connect your smartphone to your PC via USB.

Now run $ flutter doctor again and there should be 1 connected device:

[✓] Connected device (1 available)

On Windows, you might have to restart your PC first.

Visual Studio Code is a lightweight text editor with support for a wide-array of plugins.

To install it, follow the instructions on https://code.visualstudio.com/ for your platform.

For Flutter development there are two plugins required:

By clicking each link above Visual Studio Code will open the installation page of each plugin. Install both and reload the program if prompted.

Alternatively you can click on the extension icon on the left sidebar and search for Dart and Flutter and install the extensions manually.

You can start or create you emulator via VS code.

The following tables lists the most important shortcuts for using Visual Studio Code for Flutter development.

The Dart linter allows you to define rules for your code which are analyzed by the Dart SDK.

The rules are configured via a analysis_options.yaml file which for example could contain the following rules.

See https://github.com/dart-lang/linter for the available rules. See https://github.com/tenhobi/effective_dart for the rules which comply with the Dart effective guide.

*Awesome Flutter Snippets provides additional templates for Flutter development

On the command line create a new folder and switch to this folder.

Create a new Flutter project called hello_world using the following commands.

Open the main.dart file located in the lib folder in a text editor or Visual Studio Code. Change the application logic to increase the counter by 2 instead of 1 if you click the button.

Open VSCode and invoke the command palette via View  Command Palette…​ or Ctrl + Shift + P. Select Flutter: New Project.

Use flutterui as name for your project.

Select a folder where the project should be saved.

VSCode restarts and after it restarted it will creates the project.

Your explorer on the left should look similar to this:

On the right side of the status bar at the bottom of VSCode you see multiple information about your development environment. One of these indicators shows the current status of the target device (or emulator):

If no device is currently available you can click on the No Devices button.

A pop up opens that lets you choose which device you want to develop on. The list contains the emulators as well as any real device you have configured for development.

Choose one of the listed devices. If the target device is an emulator wait for it to fully start.

Select Debug  Start debugging (or use the default shortcut:[F5)] to build, deploy and start the application.

After the build process finished the app appears on your target device:

Tap 3 times on the + in the bottom right.

Now search for the primarySwatch color setting in the source code and switch the color to yellow. Notice how the number of times you clicked the button stayed the same but the color changed. This a feature of the Flutter toolkit that allows state to be persisted between hot reloads.

You can trigger a hot reload manually by using the respective button in the debug toolkit at the top of you VSCode instance:

In the ThemeData of you main.dart file change Colors.blue to Colors.red. Save and see that the emulator switches the color immediately while it preseves its state (the count).

Have a look at the generated code. Press the Control key and click on the Scaffold widget. This jumps into the Dart source code and allows you to review the documentation of this class.

In Flutter every UI Element is a widget and has the base type Widget.

The Flutter library provides lots of standard widgets. These range from button implementations to more complex widgets like lists or stacks. Widgets can be customized using properties and may have one or several children.

Flutter provides StatelessWidget and StatefulWidget widgets.

Key are used to identify StatefulWidgets.

So in case StatefulWidgets of the same type are dynamically reordered, added or removed you need to use keys. This is necessary so that Flutter can reconnect the state object with the correct element in the widget tree.

An example would be a list in which you can reorder list items.

The key should be placed on the top of the widget tree which should be preserved.

You can create keys with the UniqueKey() method or if it based on your data you can use ValueKey(yourdata.yourid);

For a detailed overview of using keys, see https://medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d.

The Scaffold widget provides convenient APIs for displaying common Material widgets like drawers, snack bars, bottom sheets and floating actions buttons. It sets various defaults (like theming), provides direct properties for a host of different child widgets and much more.

An example of a Scaffold could look like this:

Here is an example for a Scaffold widget with an app bar.

There are quite a few more settings related to the positioning, theming and other behavior, which will be covered more in depth later.

The container widget is a simple container that can receive one child. A container widget without children tries to be as big as possible.

It can also have a background color and can be styled using its decoration property. As its height and width can also be set directly this can be used if you are certain about the constrains of the element.

This would render a 150 by 150 pixel big, green box with the text "Text" displayed in it.

Flutter provides multiple default button implementations

A layout should contain a single prominent button. This makes it clear that other buttons have less importance. This prominent button represents the action we most want our users to take in order to advance through our app.

These buttons typically have the following properties: * child: contains the Widget for this button, frequently a Text widget * onPressed: takes a method reference that will be executed when the button is pressed.

To group buttons you can use the ButtonBar which is similar to a Row but automatically wraps its children if their is not sufficient space.

Buttons which have no onPressed property set or only null assigned are disabled by the Flutter framework.

The Image widget provides helper methods to create images from several sources.

For example, Image.network("https://picsum.photos/id/10/200/200"); creates an image from the given URL.

By default, Image does not provide caching or a placeholder image until it is loaded. Use the cached_network_image package for that. This requires that you add a dependency to this library in you pubspec.yaml.

See https://pub.dev/packages/cached_network_image#-installing-tab-

Some widgets require an ImageProvider, e.g. NetworkImage.

You can use a ColorFiltered widget to change the color of an image. For example the following grays out an image.

With a GestureDector you can register a click listener to any widget.

The widgets of the Flex family are widgets that allow putting multiple widgets next to each other on the same axis. The Column and Row widgets are specialized versions of the Flex widget. They set the direction attribute of the Flex constructor set to Axis.vertical and Axis.horizontal respectively. So if you know in what direction the widget will layout its children, use the Column or Row directly.

All of these widgets also take a <Widget>[…​] (list of Widget) as a constructor parameter. In here you can add all the widgets that should be displayed.

Column lays out its children vertically.

Row lays out its children horizontal.

Or for the Row widget:

Flexible (or its specialized version of Expanded) allow to distribute the available space based on the weight defined by the flex attribute. Default for the flex attribute is 1.

The ListView and GridView widgets allow to show multiple widgets in a list or in a grid. It takes care of overflowing widgets by automatically enabling scrolling if its children extend over the screen edge.

List provides also a builder to create list items.

You can also use a separator.

If your list you be reorderable, use the ReorderableListView widget.

One drawback to keep in mind is that you have to know the height of a widget beforehand or else you will get exceptions as the ListView does not know how much space it should calculate. There are however solutions to this, as some specialized widgets take care of this for you.

The PageView widget allows to swipe between different screens. It allows to define a controller which can set the initial page.

Asserts must be declared in the pubspec.yaml.

Afterwards you can load them, for example to load a text file:

Most components are available in both Cupertino (iOS) and Material (Android) styles. But of course it is up to you, which flavor you use and not dependent on the host OS. However, it is important to keep in mind, that users of the Android platform might expect Material style apps and iOS users Cupertino styles.

Conditional styling is possible, but it increases complexity in the app and depending on the size of the app might make UI-testing a lot harder. You can access the currently running host OS using Platform.isIOS and Platform.isAndroid.

Sometimes you might want to pass data to a route. This could be a user id for showing their details or just something a user entered on the first screen.

For this, Navigator.pushNamed(…​) accepts an optional named argument called arguments. You may pass any Dart object to it but is is advisable to create a "wrapper" object that has the fields you want to pass for type safety.

Creating a wrapper object might look like this:

Passing the argument to the route:

To access this data in a route, you will need to add it to the constructor of the widget.

Dart automatically assigns the object to your RouteArguments type. But keep in mind that it can’t do so, if the object passed in was not of type RouteArguments. In this case it would throw an exception.

In some cases you might want to generate the routes dynamically or you want to be safe and have an unknown route screen.

Luckily there is a onUnknownRoute handler in the MaterialApp constructor. This takes a function that returns a Route (e.g. a MaterialPageRoute or CuptertinoPageRoute). Its builder should return an instance of your page.

Once approach to manage the state is that the root widget stores the data and pass it down the widget tree via the widget constructor. Widgets which update the state would have to call the other widgets which would lead to highly coupled widgets. It also create a lot of overhead and maintaining these kinds of apps can be difficult.

Therefore, this solution is not recommended.

InheritedWidget provides a simple way of accessing data in a widget hierarchy. The parent widget extends InheritedWidget

Widgets below the hierarchy can access the data via the convenient MyWidget.of(context) method.

InheritedWidget works fine, but a even better solution is the usage of the provider package as described in the next chapter.

The Provider package provides a means to handle state. Google recommended currently this approach for state management in Flutter apps.

See https://pub.dev/packages/provider for its latest version, which you can add as dependency to your pubspec.yaml file.

It consists of providers that can provide any kind of data (from singleton services to data values that might change during the runtime of the app) down the widget hierarchy.

To provide data for all children of a widget, wrap this widget with a Provider widget. This widget allows to set the state via the builder property. If you want to provide data for your whole application, wrap your top level widget.

For example, if you want to provide one instance of UserService in your app, you can provide an instance of this class via a Provider widget.

To access this instance of UserService in another widget use the static function Provider.of<T>(context) where T is the type of your value (in this case the UserService).

This enables you to build your own providers for your data and consume them inside any children of your initial provider.

The BLoC pattern is a little bit more Dart specific as it’s based on streams which are implemented as a first class citizen in Dart. BLoC stand for Business Logic Component. The gist of this is that business logic, the logic of your app, should be moved to so called BLoCs. This removes said logic from the presentation layer and helps separating the logic from UI.

Per definition these BLoCs should also be platform independent. This has the added benefit of being very transportable to other versions of your app (for example a Dart server backend or an AngularDart frontend). These BLoCs rely exclusively on Streams as their primary means of communication to other parts of the app.

BLoC helper packages are also available from pub.dev.

The MobX and Redux approaches originate from the JavaScript world and are already used in a host of different JavaScript apps. They have been ported to Dart and are available from the pub store: MobX and Redux. == Network Communication

A Future<T> is a special class that is essential for async computation in Dart. It provides a way to delay reactions to data until the data is actually there. Use cases for this is network communication as you most likely want to wait for the data returned from the server before proceding with your computation.

Futures are very deeply integrated into the core of the Dart language. The async/await syntax can be used to "await" the result of a computation before going further in the current method’s execution.

Many built-in methods of the Dart & Flutter SDKs return futures where appropriate.

Network communication in Flutter can be simplified by using the http library by the dart.dev team. To use the library you have to add it to the pubspec.yaml file of the project:

The library contains a set of high level APIs to make working with network requests easy.

The usage of http is pretty straightforward.

It exposes the most common HTTP operations directly and returns the responses wrapped in a Future.

This is useful as you can use the async/await syntax to "await" the response.

Normally, when working with network requested data, you want to wait until the data is loaded before your show the user the corresponding UI elements. In Flutter this can be done using the FutureBuilder widget.

It takes three parameters:

An example usage of the FutureBuilder:

i.e., the first word starts with lowercase with following start with uppercase

var item;

HttpRequest httpRequest

not to do:

HTTPConnection (better: HttpConnectionInfo)

IOStream (better: IoStream)

not to do:

ID (better: Id)

For formatting, Dart provides a automated code formatter dartfmt.

Avoid lines longer than 80 characters.

Since google internally check for errors, warnings and hints, by including this, it implement the guidelines set out in guidance above.

Simply create 'analysiis_options.yaml' in your root folder containing your rules.

Refer previous sections for more details on analysis_options.yaml

For more detailed guides, refer to Guide

The basic idea of OAuth2.0 is commonly used nowadays.

When someone try to login from one website, he might be asked to login via Facebook. This case he authenticates with Facebook, giving the website access to required user-info from Facebook.

Here you use your application, StackOverflow, and one general user as a example.

For the explicit flow, you first register your app with StackOverflow (SO). Then you can get the client_id and client_secret from SO.

Then, you send the user, who is using your app, to the SO OAuth page. While connecting to the authentication page, you also send your client_id (so that SO recognizes that this is your app), scope(the data for which out app needs), the redirectUri (the Uri which you redirect to after user authenticates with the SO).

Once the user is at the SO page, he types in his Id and password to authenticate himself with SO authentication server.

Upon one successful authentication, the user is redirected to the redirectUri. Also one Code (the authentication code you need for access token later) you get from SO authentication server.

Then after getting the code, your app, together with the client_id and client_secret, connects with SO server. You ask for the relevant access_token which allows us to interact with SO database.

And the access_token is what you interact with SO API to get the relevant data of the user.

Note that in the process, client_id and client_secret are used to identify your identity (the app) to SO.

And the reason for having both code and access_token passed is because the authentication code is passed in frontend through browsers. This is considered unsafe. But your client_secret and the code can be used together to get the access_token from server side. This is then considered more safe.

There are some packages you can use to reduce the work load when working with OAuth on flutter.

For general requesting, authentication, etc. FlutterOAuth

For getting the Authorization code grant, client credentials, Respurces Owner Password Grant: oauth2

For already pre-implemented calls for different API, Amazon, Dropbox, Facebook, etc. simple_auth

Create one secret.json file under assets folder. Create one file for storing and handling data, key.dart. Then add this to the yaml file, to claim your dependency.

First, put your secret in json file.

To handle the data from json file, you need to first define one data class.

Then since the json file is stored locally, you need to implement the methods to extract the local json data.

create on SecretLoader class.

After you implemented the Json file and data class, then you can use it in the source code. This way, you avoid putting secrets in source code and keeping it out of version control system.

Flutter Homepage

Flutter API

vogella - Dart Tutorial

VsCode icons

Awesome Flutter

Flutter examples

Flutter Gallery demonstrating the basic widgets

Flutter architecture overview

Responsive design with Flutter

Youtube video about building reactive applications with Flutter

Charts for Flutter

Flutter architecture samples

How rendering works in Flutter

Flutter and extension methods

Using the Flutter testing framework