MD 102 Module 1 2
MD 102 Module 1 2
This module, you will learn basics of Flutter its advantages and features and different versions.
LEARNING CONTENTS
I. Futter: An Overview
The first version of Flutter was known as codename "Sky" and ran on
the Android operating system. It was unveiled at the 2015 Dart developer
summit, with the stated intent of being able to render consistently at 120 frames per
second.
On December 4, 2018, Flutter 1.0 was released at the Flutter Live event, denoting
the first "stable" version of the Framework.
Source: www.wikipedia.com
On December 11, 2019, Flutter 1.12 was released at the Flutter Interactive event
On May 6, 2020, the Dart SDK in version 2.8 and the Flutter in version 1.17.0 were
released, where support was added to the Metal API, improving performance on iOS
devices (approximately 50%), new Material widgets, and new network tracking.
On December 11, 2019, Flutter 1.12 was released at the Flutter Interactive event
On May 6, 2020, the Dart SDK in version 2.8 and the Flutter in version 1.17.0 were
released, where support was added to the Metal API, improving performance on iOS
devices (approximately 50%), new Material widgets, and new network tracking.
I. 1. Features
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.
I.2. Advantages
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.
With Flutter, developers has full control over the widgets and its layout.
I.3. Disadvantages
Despite its many advantages, flutter has the following drawbacks in it:
Installation in Windows
In this section, let us see how to install Flutter SDK and its requirement in a
windows system.
Step 5: Running the above command will analyze the system and show its report as
shown below:
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.
Installation in Windows
To install Flutter on MacOS, you will have to follow the following steps:
Step 4: Enable the updated path in the current session using below command
and then verify it as well.
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.
In this chapter, let us create a simple Flutter application to understand the basics of
creating a flutter application in the 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.
lib - Main folder containing Dart code written using flutter framework
Line 1: imports the flutter package, material. The material is a flutter package to create user
interface according to the Material design guidelines specified by Android.
Line 3: This is the entry point of the Flutter application. Calls runApp function and pass it an
object of MyApp class. The purpose of the runApp function is to attach the given widget to the
screen.
method is to create a part of the UI of the application. Here, build method uses MaterialApp, a
widget to create the root level UI of the application. It has three properties - title, theme and home.
theme is the theme of the widget. Here, we set blue as the overall color of the application
using ThemeData class and its property, primarySwatch.
home is the inner UI of the application, which we set another widget, MyHomePage
Line 19 - 38: MyHomePage is same as MyApp except it returns Scaffold Widget. Scaffold is a
top level widget next to MaterialApp widget used to create UI conforming material design. It has
two important properties, appBar to show the header of the application and body to show the
actual content of the application. AppBar is another widget to render the header of the
application and we have used it in appBar property. In body property, we have used Center
widget, which centers it child widget. Text is the final and inner most widget to show the text
and it is displayed in the center of the screen.
Step 8: Now, run the application using, Run -> Run main.dart
IV. Widgets
The core concept of the Flutter framework is In Flutter, Everything is a widget. Widgets are
basically user interface components used to create the user interface of the application.
In Flutter, the application is itself a widget. The application is the top- level widget and its UI is
build using one or more children (widgets), which again build using its children widgets. This
composability feature helps us to create a user interface of any complexity.
For example, the widget hierarchy of the hello world application (created in previous chapter)
is as specified in the following diagram:
MyApp is the user created widget and it is build using the Flutter native widget, MaterialApp.
MaterialApp has a home property to specify the user interface of the home page, which is
again a user created widget, MyHomePage.
body is used to specify its main user interface and appBar is used to specify its header user
interface.
Header UI is build using flutter native widget, AppBar and Body UI is build using Center
widget.
The Center widget has a property, Child, which refers the actual content and it is build
using Text widget.
Gestures
Concept of State
Layers
The most important concept of Flutter framework is that the framework is grouped into
multiple category in terms of complexity and clearly arranged in layers of decreasing
complexity. A layer is build using its immediate next level layer. The top most layer is widget
specific to Android and iOS. The next layer has all flutter native widgets. The next layer is
Rendering layer, which is low level renderer component and renders everything in the flutter
app. Layers goes down to core platform specific code.
The state of a widget can be maintained whenever necessary using StatefulWidget widget.
Flutter offers layered design so that any layer can be programmed depending on the
complexity of the task. We will discuss all these concepts in detail in the upcoming chapters
Variable is named storage location and Data types simply refers to the type and size
of data associated with variables and functions. Dart uses var keyword to declare the
variable. The syntax of var is defined below,
The final and const keyword are used to declare constants. They are defined as
below:
Booleans: Dart uses the bool keyword to represent Boolean values – true and
false.
Lists and Maps: It is used to represent a collection of objects. A simple List can be
defined as below:
Dynamic: If the variable type is not defined, then its default type is dynamic. The
following example illustrates the dynamic type variable:
A decision making block evaluates a condition before the instructions are executed.
Dart supports If, If..else and switch statements.
Loops are used to repeat a block of code until a specific condition is met. Dart
supports for, for..in , while and do..while loops.
Let us understand a simple example about the usage of control statements and
loops:
Functions
A function is a group of statements that together performs a specific task. Let us look
into a simple function in Dart as shown here:
The above function adds two values and produces 7 as the output.
. A class is a blueprint for creating objects. A class definition includes the following:
Fields
Constructors
Functions Now, let us create a simple class using the above definitions:
LEARNING ACTIVITY
Self test:
Directions: Test your present knowledge about computer systems by selecting the option that
corresponds to the correct word or phrase that will complete the statement. Encircle the letter of the
correct answer.
3. Flutter also offers many ready to use ______ to create a modern application.
A. Widget B. Flutter C. Tree D. Python
SUMMARY
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.
The first version of Flutter was known as codename "Sky" and ran on the Android operating system.
It was unveiled at the 2015 Dart developer summit, with the stated intent of being able
to render consistently at 120 frames per second.
Flutter’s simplicity makes it a good candidate for fast development. Its customization capability and
extendibility makes it even more powerful.
REFERENCES
Tutorials point. (2019). Flutter tutorials point simply learning ), pages 1-14