Flutter

Our Flutter Tutorial provides basic and advanced concepts of the Flutter framework.
Flutter is a UI toolkit for building fast, beautiful, natively compiled applications for mobile,
web, and desktop with one programming 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.

The first version of Flutter was announced in the year 2015 at the Dart Developer
Summit. It was initially known as codename Sky and can run on the Android OS.
On December 4, 2018, the first stable version of the Flutter framework was released,
denoting Flutter 1.0. The current stable release of the framework is Flutter v1.9.1+hotfix.6
on October 24, 2019.

What is Flutter?
In general, creating a mobile application is a very complex and challenging task. There
are many frameworks available, which provide excellent features to develop mobile
applications. For developing mobile apps, Android provides a native framework based on
Java and Kotlin language, while iOS provides a framework based on Objective-C/Swift
language. Thus, we need two different languages and frameworks to develop applications
for both OS. Today, to overcome form this complexity, there are several frameworks have
introduced that support both OS along with desktop apps. These types of the framework are
known as cross-platform development tools.

The cross-platform development framework has the ability to write one code and can
deploy on the various platform (Android, iOS, and Desktop). It saves a lot of time and
development efforts of developers. There are several tools available for cross-platform
development, including web-based tools, such as Ionic from Drifty Co. in 2013, Phonegap
from Adobe, Xamarin from Microsoft, and React Native form Facebook. Each of these
frameworks has varying degrees of success in the mobile industry. In recent, a new
framework has introduced in the cross-platform development family
named Flutter developed from Google.

Flutter Installation
In this section, we are going to learn how to set up an environment for the
successful development of the Flutter application.

System requirements for Windows

To install and run Flutter on the Windows system, you need first to meet these
requirements for your development environment.
Operating
Windows 7 or Later (I am Windows 10. You can also use Mac or Linux OS.).
System

Disk
400 MB (It does not include disk space for IDE/tools).
Space

1. Windows PowerShell
Tools
2. Git for Windows 2.x (Here, Use Git from Windows Command Prompt option).

SDK Flutter SDK for Windows

IDE Android Studio (Official)

Install the Flutter SDK

Step 1: Download the installation bundle of the Flutter Software Development Kit
for windows. To download Flutter SDK, Go to its https://flutter.dev/, click on Get
started button, you will get the following screen.
Step 2: Next, to download the latest Flutter SDK, click on the Windows icon. Here,
you will find the download link for SDK.

Step 3: When your download is complete, extract the zip file and place it in the
desired installation folder or location, for example, D: /Flutter.

Note: The Flutter SDK should not be placed where the administrator's permission
is required.
Step 4: To run the Flutter command in regular windows console, you need to
update the system path to include the flutter bin directory. The following steps are
required to do this:

Step 4.1: Go to MyComputer properties -> advanced tab -> environment variables.
You will get the following screen.
 Advertisement

Step 4.2: Now, select path -> click on edit. The following screen appears.
 Step 4.3: In the above window, click on New->write path of Flutter bin folder in
variable value -> ok -> ok -> ok.

Step 5: Now, run the $ flutter doctor command. This command checks for all the
requirements of Flutter app development and displays a report of the status of your
Flutter installation.

1. $ flutter doctor
Step 6: When you run the above command, it will analyze the system and show its
report, as shown in the below image. Here, you will find the details of all missing
tools, which required to run Flutter as well as the development tools that are
available but not connected with the device.
Step 7: Install the Android SDK. If the flutter doctor command does not find the
Android SDK tool in your system, then you need first to install the Android Studio
IDE. To install Android Studio IDE, do the following steps.

Step 7.1: Download the latest Android Studio executable or zip file from
the official site.

Step 7.2: When the download is complete, open the .exe file and run it. You will
get the following dialog box.
Step 7.3: Follow the steps of the installation wizard. Once the installation wizard
completes, you will get the following screen.
Step 7.4: In the above screen, click Next-> Finish. Once the Finish button is
clicked, you need to choose the 'Don't import Settings option’ and click OK. It will
start the Android Studio.

Note:> Meanwhile, the installation wizard also includes downloading Android

SDK components that are required by Flutter for development.

Step 8: Next, you need to set up an Android emulator. It is responsible for running
and testing the Flutter application.

Step 8.1: To set an Android emulator, go to Android Studio > Tools > Android >
AVD Manager and select Create Virtual Device. Or, go to Help->Find Action-
>Type Emulator in the search box. You will get the following screen.
Step 8.2: Choose your device definition and click on Next.

Step 8.3: Select the system image for the latest Android version and click on Next.

Step 8.4: Now, verify the all AVD configuration. If it is correct, click on Finish.
The following screen appears.
Step 8.5: Last, click on the icon pointed into the red color rectangle. The Android
emulator displayed as below screen.
Step 9: Now, install Flutter and Dart plugin for building Flutter application in
Android Studio. These plugins provide a template to create a Flutter application,
give an option to run and debug Flutter application in the Android Studio itself. Do
the following steps to install these plugins.

Step 9.1: Open the Android Studio and then go to File->Settings->Plugins.

Step 9.2: Now, search the Flutter plugin. If found, select Flutter plugin and click
install. When you click on install, it will ask you to install Dart plugin as below
screen. Click yes to proceed.

Step 9.3: Restart the Android Studio.

System Requirements for macOS

To install and run Flutter on macOS system, you need first to meet these

Operating
macOS (64-bit)
System

Disk Space 2.8 GB (It does not include disk space for IDE/tools).

bash
curl
git 2.x
Tools mkdir
rm
unzip
which

IDE Xcode (Official)

requirements for your development environment.

Flutter First Application

In this section, we are going to learn how to create a simple application in Android
Studio to understand the basics of the Flutter application. To create Flutter
application, do the following steps:

Step 1: Open the Android Studio.

Step 2: Create the Flutter project. To create a project, go to File-> New->New

Flutter Project. The following screen helps to understand it more clearly.
Step 3: In the next wizard, you need to choose the Flutter Application. For this,
select Flutter Application-> click Next, as shown in the below screen.

Backward Skip 10sPlay VideoForward Skip 10s

Step 4: Next, configure the application details as shown in the below screen and
click on the Next button.

Project Name: Write your Application Name.

Flutter SDK Path: <path_to_flutter_sdk>

Project Location: <path_to_project_folder>

Descriptions: <A new Flutter hello world application>.

Step 5: In the next wizard, you need to set the company domain name and click the
Finish button.
After clicking the Finish button, it will take some time to create a project. When
the project is created, you will get a fully working Flutter application with minimal
functionality.
Step 6: Now, let us check the structure of the Flutter project application and its
purpose. In the below image, you can see the various folders and components of
the Flutter application structure, which are going to discuss here.
.idea: This folder is at the very top of the project structure, which holds the
configuration for Android Studio. It doesn't matter because we are not going to
work with Android Studio so that the content of this folder can be ignored.

.android: This folder holds a complete Android project and used when you build
the Flutter application for Android. When the Flutter code is compiled into the
native code, it will get injected into this Android project, so that the result is a
native Android application. For Example: When you are using the Android
emulator, this Android project is used to build the Android app, which further
deployed to the Android Virtual Device.

.ios: This folder holds a complete Mac project and used when you build the Flutter
application for iOS. It is similar to the android folder that is used when developing
an app for Android. When the Flutter code is compiled into the native code, it will
get injected into this iOS project, so that the result is a native iOS application.
Building a Flutter application for iOS is only possible when you are working on
macOS.

.lib: It is an essential folder, which stands for the library. It is a folder where we
will do our 99 percent of project work. Inside the lib folder, we will find the Dart
files which contain the code of our Flutter application. By default, this folder
contains the file main.dart, which is the entry file of the Flutter application.

.test: This folder contains a Dart code, which is written for the Flutter application
to perform the automated test when building the app. It won't be too important for
us here.

We can also have some default files in the Flutter application. In 99.99 percent of
cases, we don't touch these files manually. These files are:

.gitignore: It is a text file containing a list of files, file extensions, and folders that
tells Git which files should be ignored in a project. Git is a version-control file for
tracking changes in source code during software development Git.

.metadata: It is an auto-generated file by the flutter tools, which is used to track

the properties of the Flutter project. This file performs the internal tasks, so you do
not need to edit the content manually at any time.

.packages: It is an auto-generated file by the Flutter SDK, which is used to contain

a list of dependencies for your Flutter project.

flutter_demoapp.iml: It is always named according to the Flutter project's name

that contains additional settings of the project. This file performs the internal tasks,
which is managed by the Flutter SDK, so you do not need to edit the content
manually at any time.

pubspec.yaml: It is the project's configuration file that will use a lot during
working with the Flutter project. It allows you how your application works. This
file contains:

o Project general settings such as name, description, and version of the project.
o Project dependencies.
o Project assets (e.g., images).

pubspec.lock: It is an auto-generated file based on the .yaml file. It holds more

detail setup about all dependencies.

README.md: It is an auto-generated file that holds information about the

project. We can edit this file if we want to share information with the developers.

Step 7: Open the main.dart file and replace the code with the following code
snippets.
1. import 'package:flutter/material.dart';
2.
3. void main() => runApp(MyApp());
4.
5. class MyApp extends StatelessWidget {
6. // This widget is the root of your application.
7. @override
8. Widget build(BuildContext context) {
9. return MaterialApp(
10. title: 'Hello World Flutter Application',
11. theme: ThemeData(
12. // This is the theme of your application.
13. primarySwatch: Colors.blue,
14. ),
15. home: MyHomePage(title: 'Home page'),
16. );
17. }
18. }
19. class MyHomePage extends StatelessWidget {
20. MyHomePage({Key key, this.title}) : super(key: key);
21. // This widget is the home page of your application.
22. final String title;
23.
24. @override
25. Widget build(BuildContext context) {
26. return Scaffold(
27. appBar: AppBar(
28. title: Text(this.title),
29. ),
30. body: Center(
31. child: Text('Hello World'),
32. ),
33. );
34. }
35. }
Step 8: Let us understand the above code snippet line by line.

o To start Flutter programming, you need first to import the Flutter package.
Here, we have imported a Material package. This package allows you to
 create user interface according to the Material design guidelines specified by
Android.
o The second line is an entry point of the Flutter applications similar to the
main method in other programming languages. It calls the runApp function
and pass it an object of MyApp The primary purpose of this function is to
attach the given widget to the screen.
o Line 5 to 18 is a widget used for creating UI in the Flutter framework. Here,
the StatelessWidget does not maintain any state of the widget. MyApp
extends StatelessWidget that overrides its build The build method is used
for creating a part of the UI of the application. In this block, the build
method uses MaterialApp, a widget to create the root level UI of the
application and contains three properties - title, theme, and home.
o Title: It is the title of the Flutter application.
o Theme: It is the theme of the widget. By default, it set the blue as the
overall color of the application.
o Home: It is the inner UI of the application, which sets another widget
(MyHomePage) for the application.
o Line 19 to 35, the MyHomePage is similar to MyApp, except it will return
the Scaffold Scaffold widget is a top-level widget after the MaterialApp
widget for creating the user interface. This widget contains two
properties appBar and body. The appBar shows the header of the app, and
body property shows the actual content of the application.
Here, AppBar render the header of the application, Center widget is used to
center the child widget, and Text is the final widget used to show the text
content and displays in the center of the screen.
Step 9: Now, run the application. To do this, go to Run->Run main.dart, as shown
in the below screen.
Step 10: Finally, you will get the output as below screen.
Flutter Architecture

In this section, we are going to discuss the architecture of the Flutter framework.
The Flutter architecture mainly comprises of four components.

1. Flutter Engine
2. Foundation Library
3. Widgets
4. Design Specific Widgets

Flutter Engine
It is a portable runtime for high-quality mobile apps and primarily based on the
C++ language. It implements Flutter core libraries that include animation and
graphics, file and network I/O, plugin architecture, accessibility support, and a dart
runtime for developing, compiling, and running Flutter applications. It takes
Google's open-source graphics library, Skia, to render low-level graphics.
Foundation Library
It contains all the required packages for the basic building blocks of writing a
Flutter application. These libraries are written in Dart language.

Widgets
In Flutter, everything is a widget, which is the core concept of this framework.
Widget in the Flutter is basically a user interface component that affects and
controls the view and interface of the app. It represents an immutable description
of part of the user interface and includes graphics, text, shapes, and animations that
are created using widgets. The widgets are similar to the React components.

In Flutter, the application is itself a widget that contains many sub widgets. It
means the app is the top-level widget, and its UI is build using one or more
children widgets, which again includes sub child widgets. This feature helps you to
create a complex user interface very easily.

We can understand it from the hello world example created in the previous section.
Here, we are going to explain the example with the following diagram.

In the above example, we can see that all the components are widgets that contain
child widgets. Thus, the Flutter application is itself a widget.
Design Specific Widgets
The Flutter framework has two sets of widgets that conform to specific design
languages. These are Material Design for Android application and Cupertino Style
for IOS application.

Gestures
It is a widget that provides interaction (how to listen for and respond to) in Flutter
using GestureDetector. GestureDector is an invisible widget, which includes
tapping, dragging, and scaling interaction of its child widget. We can also use other
interactive features into the existing widgets by composing with the
GestureDetector widget.

State Management
Flutter widget maintains its state by using a special widget, StatefulWidget. It is
always auto re-rendered whenever its internal state is changed. The re-rendering is
optimized by calculating the distance between old and new widget UI and render
only necessary things that are changes.

Layers
Layers are an important concept of the Flutter framework, which are grouped into
multiple categories in terms of complexity and arranged in the top-down approach.
The topmost layer is the UI of the application, which is specific to the Android and
iOS platforms. The second topmost layer contains all the Flutter native widgets.
The next layer is the rendering layer, which renders everything in the Flutter app.
Then, the layers go down to Gestures, foundation library, engine, and finally, core
platform-specific code. The following diagram specifies the layers in Flutter app
development.