Developing a mobile application is a complex and challenging task. There are many frameworks available to develop a mobile application. Android provides a native framework based on Java language and iOS provides a native framework based on Objective-C / Swift language.

However, to develop an application supporting both the OSs, we need to code in two different languages using two different frameworks. To help overcome this complexity, there exists mobile frameworks supporting both OS. These frameworks range from simple HTML based hybrid mobile application framework (which uses HTML for User Interface and JavaScript for application logic) to complex language specific framework (which do the heavy lifting of converting code to native code). Irrespective of their simplicity or complexity, these frameworks always have many disadvantages, one of the main drawback being their slow performance.

In this scenario, Flutter – a simple and high performance framework based on Dart language, provides high performance by rendering the UI directly in the operating system’s canvas rather than through native framework.

Flutter also offers many ready to use widgets (UI) to create a modern application. These widgets are optimized for mobile environment and designing the application using widgets is as simple as designing HTML.

To be specific, Flutter application is itself a widget. Flutter widgets also supports animations and gestures. The application logic is based on reactive programming. Widget may optionally have a state. By changing the state of the widget, Flutter will automatically (reactive programming) compare the widget’s state (old and new) and render the widget with only the necessary changes instead of re-rendering the whole widget.

We shall discuss the complete architecture in the coming chapters.

Features of Flutter

Flutter framework offers the following features to developers −

  • Modern and reactive framework.
  • Uses Dart programming language and it is very easy to learn.
  • Fast development.
  • Beautiful and fluid user interfaces.
  • Huge widget catalog.
  • Runs same UI for multiple platforms.
  • High performance application.

Installation    

1.   Download the following installation bundle to get the latest stable release of the Flutter SDK:

https://flutter.dev/docs/development/tools/sdk/releases

2. Extract the zip file and place the contained flutter in the desired installation location for the Flutter SDK (for example, C:\Users\<your-user-name>\Documents).

If you don’t want to install a fixed version of the installation bundle, you can skip steps 1 and 2. Instead, get the source code from the Flutter repo on GitHub, and change branches or tags as needed. For example:

C:\src>git clone https://github.com/flutter/flutter.git -b stable

Update your path

If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATH environment variable:

  • From the Start search bar, enter ‘env’ and select Edit environment variables for your account.
  • Under User variables check if there is an entry called Path:
    • If the entry exists, append the full path to flutter\bin using; as a separator from existing values.
    • If the entry doesn’t exist, create a new user variable named Path with the full path to flutter\bin as its value.

You have to close and reopen any existing console windows for these changes to take effect.

Run flutter doctor

From a console window that has the Flutter directory in the path (see above), run the following command to see if there are any platform dependencies you need to complete the setup:

C:\src\flutter>flutter doctor

This command checks your environment and displays a report of the status of your Flutter installation. Check the output carefully for other software you might need to install or further tasks to perform (shown in bold text).

For example:

[-] Android toolchain – develop for Android devices
• Android SDK at D:\Android\sdk
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
   visit https://flutter.dev/setup/#android-setup for detailed instructions.

Android setup

Install Android Studio

1.    Download and install Android Studio.

https://developer.android.com/studio

2.    Start Android Studio, and go through the ‘Android Studio Setup Wizard’. This installs the latest Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.

3.    Run flutter doctor to confirm that Flutter has located your installation of Android Studio. If Flutter cannot locate it, run flutter config –android-studio-dir <directory> to set the directory that Android Studio is installed to.

Set up your Android device

To prepare to run and test your Flutter app on an Android device, you need an Android device running Android 4.1 (API level 16) or higher.

1.    Enable Developer options and USB debugging on your device.

2.    Windows-only: Install the Google USB Driver.

3.    Using a USB cable, plug your phone into your computer. If prompted on your device, authorize your computer to access your device.

4.    In the terminal, run the flutter devices command to verify that Flutter recognizes your connected Android device. By default, Flutter uses the version of the Android SDK where your adb tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the ANDROID_SDK_ROOT environment variable to that installation directory.

Set up the Android emulator

To prepare to run and test your Flutter app on the Android emulator, follow these steps:

1.    Enable VM acceleration on your machine.

2.    Launch Android Studio, click the AVD Manager icon, and select Create Virtual Device…

o    In older versions of Android Studio, you should instead launch Android Studio > Tools > Android > AVD Manager and select Create Virtual Device…. (The Android submenu is only present when inside an Android project.)

o    If you do not have a project open, you can choose Configure > AVD Manager and select Create Virtual Device

3.    Choose a device definition and select Next.

4.    Select one or more system images for the Android versions you want to emulate, and select Next. An x86 or x86_64 image is recommended.

5.    Under Emulated Performance, select Hardware – GLES 2.0 to enable hardware acceleration.

6.    Verify the AVD configuration is correct, and select Finish.

7.    In Android Virtual Device Manager, click Run in the toolbar. The emulator starts up and displays the default canvas for your selected OS version and device.

Agree to Android Licenses

Before you can use Flutter, you must agree to the licenses of the Android SDK platform. This step should be done after you have installed the tools listed above.

1.    Make sure that you have a version of Java 8 installed and that your JAVA_HOME environment variable is set to the JDK’s folder.

Android Studio versions 2.2 and higher come with a JDK, so this should already be done.

2.    Open an elevated console window and run the following command to begin signing licenses.

content_copy

$ flutter doctor –android-licenses

3.    Review the terms of each license carefully before agreeing to them.

4.    Once you are done agreeing with licenses, run flutter doctor again to confirm that you are ready to use Flutter.