1.

Flutter – Introduction

In general, 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 / Shift 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.

1
 Flutter

Advantages of Flutter
Flutter comes with beautiful and customizable widgets for high performance and
outstanding mobile application. It fulfills all the custom needs and requirements. Besides
these, Flutter offers many more advantages as mentioned below:

 Dart has a large repository of software packages which lets you to extend the
capabilities of your application.

 Developers need to write just a single code base for both applications (both Android
and iOS platforms). Flutter may to be extended to other platform as well in the
future.

 Flutter needs lesser testing. Because of its single code base, it is sufficient if we
write automated tests once for both the platforms.

 Flutter’s simplicity makes it a good candidate for fast development. Its

customization capability and extendibility makes it even more powerful.

 With Flutter, developers has full control over the widgets and its layout.

 Flutter offers great developer tools, with amazing hot reload.

Disadvantages of Flutter
Despite its many advantages, flutter has the following drawbacks in it:

 Since it is coded in Dart language, a developer needs to learn new language (though
it is easy to learn).

 Modern framework tries to separate logic and UI as much as possible but, in Flutter,
user interface and logic is intermixed. We can overcome this using smart coding and
using high level module to separate user interface and logic.

 Flutter is yet another framework to create mobile application. Developers are having
a hard time in chosing the right development tools in hugely populated segment.

2. Flutter – Installation Flutter

This chapter will guide you through the installation of Flutter on your local computer in
detail.

Installation in Windows
In this section, let us see how to install Flutter SDK and its requirement in a windows
system.

Step 1: Go to URL, https://flutter.dev/docs/get-started/install/windows and download the

latest Flutter SDK. As of April 2019, the version is 1.2.1 and the file is
flutter_windows_v1.2.1-stable.zip.

2
Step 2: Unzip the zip archive in a folder, say C:\flutter\

Step 3: Update the system path to include flutter bin directory.

Step 4: Flutter provides a tool, flutter doctor to check that all the requirement of flutter
development is met.

flutter doctor

Step 5: Running the above command will analyze the system and show its report as
shown below:

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.2.1, on Microsoft Windows
[Version 10.0.17134.706], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK
version 28.0.3)
[√] Android Studio (version 3.2)
[√] VS Code, 64-bit edition (version
1.29.1) [!] Connected device
! No devices available

! Doctor found issues in 1 category.

The report says that all development tools are available but the device is not connected.
We can fix this by connecting an android device through USB or starting an android
emulator.

Step 6: Install the latest Android SDK, if reported by flutter doctor

Step 7: Install the latest Android Studio, if reported by flutter doctor

Step 8: Start an android emulator or connect a real android device to the system.

Step 9: Install Flutter and Dart plugin for Android Studio. It provides startup template to
create new Flutter application, an option to run and debug Flutter application in the Android
studio itself, etc.,

3
 Flutter

 Open Android Studio.

 Click File > Settings > Plugins.
 Select the Flutter plugin and click Install.
 Click Yes when prompted to install the Dart plugin.
 Restart Android studio.

Installation in MacOS
To install Flutter on MacOS, you will have to follow the following steps:

Step 1: Go to URL, https://flutter.dev/docs/get-started/install/macos and

download latest Flutter SDK. As of April 2019, the version is 1.2.1 and the
file is flutter_macos_v1.2.1- stable.zip.

Step 2: Unzip the zip archive in a folder, say /path/to/flutter

Step 3: Update the system path to include flutter bin directory (in ~/.bashrc file).

> export PATH="$PATH:/path/to/flutter/bin"

Step 4: Enable the updated path in the current session using below
command and then verify it as well.

source ~/.bashrc
source
$HOME/.bash_profile echo
$PATH
Flutter provides a tool, flutter doctor to check that all the requirement
of flutter development is met. It is similar to the Windows counterpart.

Step 5: Install latest XCode, if reported by flutter doctor

Step 6: Install latest Android SDK, if reported by flutter doctor

Step 7: Install latest Android Studio, if reported by flutter doctor

Step 8: Start an android emulator or connect a real android device to

the system to develop android application.

Step 9: Open iOS simulator or connect a real iPhone device to the system
to develop iOS application.

Step 10: Install Flutter and Dart plugin for Android Studio. It provides the
startup template to create a new Flutter application, option to run and
debug Flutter application in the Android studio itself, etc.,

 Open Android Studio.

 Click Preferences > Plugins.
 Select the Flutter plugin and click Install.
 Click Yes when prompted to install the Dart plugin.
 Restart Android studio.