DEPARTMENT OF COMPUTER APPLICATION

Mobile Application Development_ CA-326

Flutter is a UI toolkit for building fast, beautiful, natively compiled applications for mobile, web, and
desktop with one programing language and single codebase. It is free and open-source. Initially, it
was developed from Google and now manages by an ECMA standard. Flutter apps use Dart
programming language for creating an app.

Features of Flutter

Flutter gives easy and simple methods to start building beautiful mobile and desktop apps with a rich
set of material design and widgets. Here, we are going to discuss its main features for developing the
mobile framework.

Open-Source: Flutter is a free and open-source framework for developing mobile applications.

Cross-platform: This feature allows Flutter to write the code once, maintain, and can run on different
platforms. It saves the time, effort, and money of the developers.

ADVERTISEMENT

Hot Reload: Whenever the developer makes changes in the code, then these changes can be seen
instantaneously with Hot Reload. It means the changes immediately visible in the app itself. It is a
very handy feature, which allows the developer to fix the bugs instantly.

Accessible Native Features and SDKs: This feature allows the app development process easy and
delightful through Flutter's native code, third-party integration, and platform APIs. Thus, we can
easily access the SDKs on both platforms.

Minimal code: Flutter app is developed by Dart programming language, which uses JIT and AOT
compilation to improve the overall start-up time, functioning and accelerates the performance. JIT
enhances the development system and refreshes the UI without putting extra effort into building a
new one.

Widgets: The Flutter framework offers widgets, which are capable of developing customizable
specific designs. Most importantly, Flutter has two sets of widgets: Material Design and Cupertino
widgets that help to provide a glitch-free experience on all platforms.

Advantage of Flutter

Flutter fulfills the custom needs and requirements for developing mobile applications. It also offers
many advantages, which are listed below.
 o It makes the app development process extremely fast because of the hot-reload feature. This
feature allows us to change or update the code are reflected as soon as the alterations are
made.

o It provides the smoother and seamless scrolling experiences of using the app without much
hangs or cuts, which makes running applications faster in comparison to other mobile app
development frameworks.

o Flutter reduces the time and efforts of testing. As we know, flutter apps are cross-platform so
that testers do not always need to run the same set of tests on different platforms for the
same app.

o It has an excellent user interface because it uses a design-centric widget, high-development

o It is similar to a reactive framework where the developers do not need to update the UI
content manually.

o It is suitable for MVP (Minimum Viable Product) apps because of its speedy development
process and cross-platform nature.

Disadvantages of Flutter

We have seen earlier that the Flutter has many advantages, but it also contains some disadvantages,
which are given below.

o The Flutter is a comparatively new language that needs continuous integration support
through the maintenance of scripts.

o It provides very limited access to SDK libraries. It means a developer does not have a lot of
functionalities to create a mobile application. Such types of functionalities need to be
developed by the Flutter developer themselves.

o The Flutter apps do not support the browser. It only supports Android and iOS platforms.

o It uses Dart programming for coding, so a developer needs to learn new technologies.
However, it is easy to learn for developers.

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

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.,

• 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

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.

create a simple Flutter application to understand the basics of creating a flutter application in the
Android Studio.

Step 1 − Open Android Studio

Step 2 − Create Flutter Project. For this, click File → New → New Flutter Project
Step 3 − Select Flutter Application. For this, select Flutter Application and click Next.
Step 4 − Configure the application as below and click Next.

• Project name: hello_app

• Flutter SDK Path: <path_to_flutter_sdk>

• Project Location: <path_to_project_folder>

• Description: Flutter based hello world application

Set the company domain as flutterapp.tutorialspoint.com and click Finish.

Step 6 − Enter Company domain.

Android Studio creates a fully working flutter application with minimal functionality. Let us check the
structure of the application and then, change the code to do our task.

The structure of the application and its purpose is as follows −

• android − Auto generated source code to create android application

• ios − Auto generated source code to create ios application

• lib − Main folder containing Dart code written using flutter framework

• ib/main.dart − Entry point of the Flutter application

• test − Folder containing Dart code to test the flutter application

• test/widget_test.dart − Sample code

• .gitignore − Git version control file

• .metadata − auto generated by the flutter tools

• .packages − auto generated to track the flutter packages

• .iml − project file used by Android studio

• pubspec.yaml − Used by Pub, Flutter package manager

• pubspec.lock − Auto generated by the Flutter package manager, Pub

• README.md − Project description file written in Markdown format

Step 7 − Replace the dart code in the lib/main.dart file with the below code −

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Hello World Demo Application',

theme: ThemeData(

primarySwatch: Colors.blue,

),

home: MyHomePage(title: 'Home page'),

);

}
}

class MyHomePage extends StatelessWidget {

MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(this.title),

),

body: Center(

child:

Text(

'Hello World',

),

);

Architecture of flutter

The flutter framework is a layered system with each layer dependent on the layer below. A single
layer has several independent libraries.

On a high level, the flutter framework’s architecture has three main parts or layers:

• Embedder
 • Engine

• Framework

Each layer further has components that coordinate with each other for a smooth user experience.

Flutter system overview

Embedder layer

The embedder layer has platform-specific embedders, many of which provide an entry point and
coordinate with their respective operating system to access services like rendering, storage, and
more. It has many embedders for possible targeted platforms.

Java and C++ are used in embedders for android, objective-C/ C++ for IOS and macOS, and C++ for
Linux and windows.

Note: As flutter is open-source, we can check the code and change it according to our needs.

Engine layer

The engine layer is the core of flutter written in C/C++. It is responsible for taking care of input,
output, and rasterizing composited scenes, as flutter is a UI toolkit. It uses the skia library for
rendering graphics.

The engine layer is also responsible for service and network protocols, such as network input and
output, file management, and the core API of flutter. The flutter engine layer can be accessed through
the dart:ui library, which wraps all these functionalities in dart classes.

Framework layer

In the framework layer, the developer interacts with and writes flutter applications. It is written in
dart language and has predefined libraries, layouts, and more.

The framework layer has three main layer components, which are the following:

• Foundation layer

• Rendering layer

• Widget layer

Foundation layer

To Flutter, some foundational classes and some building block services provide abstraction. Some of
the main building block services are animations and gestures.
 • Flutter can support animations like tween, hero, silver, transform, fade in the widget,
animation builder, animated opacity, and any animation related to physics.

• The gesture is a widget used to detect gestures like tapping, dragging, and scaling. It has an
invisible widget name gesture detector.

Rendering layer

This layer is responsible for converting widgets in a flutter to pixels and showing them on the screen.
It takes a tree of renderable objects called the widgets tree. Whenever any animation, input, or state
of the widget changes, this layer is called, which updates the layout and shows them on the screen.

Widget layer

Description of the widgets used are as follows:

• Scaffold – Implements the basic material design visual layout structure.

• App-Bar – To create a bar at the top of the screen.

• Text To write anything on the screen.

• Container – To contain any widget.

• Center – To provide center alignment to other widgets.

A widget is a like component in ReactJS. Each renderable object has its widget, which the developer
uses to make a widget tree. There are many predefined widgets. We can also write code and create a
new widget that can be used in an application, just like we make components in ReactJS.

RootMaterialAppHomepageScaffoldAppBarCenterTextText

A widget tree of Hello world

In flutter, we use these reusable widgets to make a widget tree. This widget tree then goes to the
rendering layer and appears on the screen as pixels.

Material (for android) and Cupertino (for IOS) libraries provide predefined widgets on the layout
design.