Flutter – Introduction
Chapter 01
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 / 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.
Flutter – Introduction
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.
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.
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:
Advantages of Flutter
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 choosing the right
development tools in hugely populated segment.
Flutter – Installation
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.
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
Flutter – Installation
Installation in Windows:
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.
Flutter – Installation
Installation in Windows:
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.
Flutter – Installation
Installation in Windows:
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.,
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.
Flutter – Installation
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"
Flutter – Installation
Installation in MacOS
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.
Flutter – Installation
Installation in MacOS
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.
END
