MOBILE APPLICATION DEVELOPMENT

Introduction

1. What is Flutter?
Flutter is Google’s portable UI framework for building modern, native, and
reactive applications for iOS and Android. It is an open-source hosted on
GitHub from Google. Flutter uses Dart, a modern object-oriented language that
compiles to native ARM code and production ready JavaScript code.

Portable UI framework allows developers to write code once and deploy it across
multiple platforms like iOS, Android, Web. Meaning, you do not have to create
separate codebase for each platform. Flutter provides tools to create a single
application that run on various devices.

Reactive Applications – In Application, UI automatically updates when the

underlying data changes. You don’t need to manually refresh the UI. Flutter
updates only the parts of the UI that need to be changed, making the application
reactive nature of the framework.

Flutter relies on the Skia 2D rendering engine to draw its user interface (UI).
Skia is a powerful graphics library that can render 2D graphics (like shapes,
images, and text) across various hardware (like smartphones, tablets, and
computers) and software platforms (like Android, iOS, and web browsers).
Flutter uses Skia to ensure that its applications have consistent, high-
performance graphics rendering across all supported platforms.
Flutter is fast, and rendering runs at 60 frames per second (fps) and 120fps for
capable devices. The higher the fps, the smoother the animations and
transitions.

VINAYAK GOPAL 1
 MOBILE APPLICATION DEVELOPMENT

2. Benefits of Flutter

 Beautiful and Professional-Looking Applications: Flutter provides tools

to create visually appealing apps with a polished, professional
appearance.
 Smooth Animations and Gesture Detection: Flutter allows you to easily
add smooth animations, gesture detection, and interactive feedback
(like splash effects) to enhance the user experience.
 Hot Reload: During development, Flutter’s hot reload feature lets you
instantly see changes in the app without restarting it. This speeds up
development by allowing you to quickly test and refine features.
 State Preservation: When using hot reload, the app's current state (such
as data values) is preserved, making it easier to continue working
without losing progress.

3. Flutter with Dart

Dart is a programming language developed by Google, designed for building

fast, modern apps for multiple platforms, including mobile, web, and
desktop.

Flutter uses Dart to build your app's user interface, so you don't need to use
different languages like HTML or separate design tools. Flutter is
declarative, meaning it creates the UI based on the current state of your
app. When the app's data changes, Flutter automatically redraws the UI by
creating new versions of the widgets.

VINAYAK GOPAL 2
 MOBILE APPLICATION DEVELOPMENT

4. Widgets and Elements

4.1 Widgets in Flutter

 Flutter’s UI is built using widgets. It uses its own rendering engine to
draw these widgets on the screen.

Widgets

In a Flutter app, the user interface (UI) is built using widgets. Each widget in
Flutter is an immutable configuration that defines a specific part of the UI, such
as a button, text, or layout structure. By combining different widgets, you
create the overall design and functionality of the app, forming what is known
as the widget tree.

Each widget in Flutter is an immutable configuration that defines a specific part of

the UI - A widget is a predefined blueprint or template that specifies how a particular
part of the app's user interface (UI) should look and behave. Once a widget is created, its
design or structure doesn't change directly; instead, new widgets are created to reflect
changes in the UI. This fixed nature of widgets ensures that the UI remains predictable
and consistent.

VINAYAK GOPAL 3
 MOBILE APPLICATION DEVELOPMENT

For example, imagine an architect designing a house: the walls, windows, and
doors are like widgets that, when combined, form the complete house.
Similarly, in a Flutter app, each part of the UI is a widget that contributes to the
final interface.

4.2 Elements
What happens when these widgets are actually displayed on the screen?
This is where elements come into play. An element in Flutter is the instance of
a widget that has been rendered on the screen. Essentially, the element is the
living, breathing version of the widget’s blueprint. When you see a button or
text on the app, what you’re looking at, is the element that was created based
on the widget’s configuration. The collection of these rendered elements forms
the element tree, which mirrors the structure of the widget tree but
represents the actual on-screen components.

Widget Text

Widget Container

Widget Expansion tile

Widget Container

What you are looking at is the element

created based on widget’s configuration.
All the elements you see on the screen
make up the element tree.

VINAYAK GOPAL 4
 MOBILE APPLICATION DEVELOPMENT

5. Understanding Widget Lifecycle Events

In general, what is State?

In Flutter (and in programming generally), state refers to any data or

information that a widget holds and uses to build its user interface (UI). The
state can change over time, usually in response to user actions or other events,
and when it does, the UI can be updated to reflect those changes.

Widget Lifecycle Events in Flutter refer to the different stages a widget goes
through from when it's created until it's removed from the app.
To build the UI, you use two main types of widgets,

5.1 StatelessWidget
A Stateless Widget in Flutter does not change its appearance or behavior once
it’s built. It is static, meaning it doesn't change as per user input or any changes
in data after it’s rendered. You use a Stateless Widget when the part of the UI
you want to create doesn’t need to update or change.

These widgets remain constant throughout the lifetime of the app are called
stateless widgets. We use StatelessWidget when we want structures to stay
the same in the app.

Constructor of Stateless widget calls build () method to display the content on UI

VINAYAK GOPAL 5
 MOBILE APPLICATION DEVELOPMENT

Does not Change

A StatelessWidget doesn't change once it's

displayed. For example, if the screen shows
a text with a description, it stays the same
and doesn’t update.

For Example

VINAYAK GOPAL 6
 MOBILE APPLICATION DEVELOPMENT

StatelessWidget Lifecycle Breakdown

1. Constructor call

when you create an instance of MyHomePage, the constructor is called first.

The constructor MyHomePage ({Key? key }) calls the constructor of the parent
class StatelessWidget with super(key: key).

2. Build Method Call

Next, Flutter needs to display the content in UI. To do this, it calls the build()
method of MyHomePage. This is where the UI is created based on the widget’s
configuration.

5.2 StatefulWidget
A Stateful Widget, on the other hand, is dynamic. It can change its appearance
or behavior in response to user interaction or other factors. It has a mutable
state, meaning it can change, and when it does, the widget is rebuilt to reflect
those changes.
If the variable of a stateful widget is changed, the build method is called and an
updated view is shown on the screen.

VINAYAK GOPAL 7
 MOBILE APPLICATION DEVELOPMENT

A StatefulWidget is built based on its own configuration but can change

dynamically. For example, the screen displays an icon with a description, but
values can change based on the user’s interaction. This type of widget has a
mutable state that can change over time.
The stateful widget is declared with two classes, the StatefulWidget class and
the State class. The StatefulWidget class is rebuilt when the widget’s
configuration changes, but the State class can persist (remain), enhancing
performance.

Stateful widgets are mutable, which means this widget interact with users and send new
update to the screen.

Two Classes Involved

1.1 StatefulWidget Class: This is the part of the widget that handles the
widget's configuration, like its layout or appearance.

The MyStatefulWidget class provides the instructions on how to create the

widget. It doesn’t hold any data or state by itself, but it sets the stage for the
stateful widget to function.

StatefulWidget Class

class MyStatefulWidget extends StatefulWidget {

@override
MyStatefulWidgetState createState() =>
MyStatefulWidgetState();
}

What It Is: MyStatefulWidget is a class that extends StatefulWidget. This is the blueprint for
the widget's structure, but it doesn't contain the logic or data itself.

What It Does: The main job of this class is to create an instance of the State class that will
handle the actual state of the widget. This is done through the createState() method.

How It Works:

 When Flutter needs to display this widget, it calls the createState() method.

VINAYAK GOPAL 8
 MOBILE APPLICATION DEVELOPMENT

 This method returns an instance of the MyStatefulWidgetState class, which will

manage the widget’s state and behavior.

1.2 State Class: This part holds the widget’s state, which includes any data or
variables that can change over time.

MyStatefulWidgetState is where the actual data and logic live. This class holds
the mutable state that can change over time, such as the number of times a
button has been pressed

 When Changes Happen: If the configuration of the StatefulWidget

changes (for example, the widget gets new properties), Flutter will
rebuild the StatefulWidget class.

 What Stays the Same: Even though the StatefulWidget is rebuilt, the
State class is not recreated. This means that any data or variables stored
in the State class remain unchanged.
State Class

class MyStatefulWidgetState extends State<MyStatefulWidget> {

int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Stateful Widget'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',

VINAYAK GOPAL 9
 MOBILE APPLICATION DEVELOPMENT

),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}

What It Is: MyStatefulWidgetState is the class that extends State<MyStatefulWidget>. This

class contains the actual logic and state (like variables) that define how the widget behaves
and looks.

What It Does:

 Manages State: The _counter variable keeps track of how many times the button has
been pressed. This is the "state" of the widget.

 Updates UI: The _incrementCounter() method is called when the button is pressed.
It increases the _counter variable and calls setState(). This triggers a rebuild of the UI
to reflect the new value of _counter.

 Builds the UI: The build() method defines what the widget should look like. It returns
a Scaffold with an AppBar, a Column of text, and a FloatingActionButton. The Text
widget displays the current value of _counter.

How It Works:

 When the button is pressed, _incrementCounter() is called, updating _counter and

calling setState().
 setState() tells Flutter that the widget’s state has changed, so it needs to rebuild the
UI.
 The build() method is called again, and the updated UI is displayed.

VINAYAK GOPAL 10
 MOBILE APPLICATION DEVELOPMENT

StatefulWidget lifecycle

VINAYAK GOPAL 11
MOBILE APPLICATION DEVELOPMENT

VINAYAK GOPAL 12
 MOBILE APPLICATION DEVELOPMENT

6. Understanding Widget Tree and The Element Tree

When you build a Flutter app, you arrange (or nest) widgets together to
create what’s called a widget tree. Think of the widget tree as a blueprint
or plan that tells Flutter how your app’s user interface (UI) should look and
behave.

But just having a blueprint isn’t enough—you need to bring it to life. That’s
where the element tree comes in. The Flutter framework uses the widget
tree as a guide to create elements, which are the actual instances of
widgets that are displayed on the screen. These elements are what you see
and interact with in the app. So, while the widget tree is like a blueprint, the
element tree is like the actual building based on that blueprint.

Widget Tree Element Tree

JournalList Stateless

Widgets Elements

Widget Tree: The blueprint that defines what the UI should look like. It’s made
up of the widgets you’ve written in your code.

Element Tree: The real-world version of the widget tree that appears on your
screen. It’s made up of elements, which are the widgets brought to life.

Understanding with example

Widget Tree (Blueprint)

 First, you create a blueprint of the house. This blueprint shows where
the rooms will be, how big they are, where the doors and windows will
go, and so on.

VINAYAK GOPAL 13
 MOBILE APPLICATION DEVELOPMENT

 In Flutter, this blueprint is like the widget tree. It defines what the app’s
user interface should look like but doesn’t actually create anything yet.

Element Tree (Actual House)

 Next, construction workers use the blueprint to build the actual house.
They create walls, put in doors, and install windows. Now, you can walk
through the house and see all the rooms and features you designed.

 In Flutter, this built house is like the element tree. It’s the actual
instance of the widgets that the user interacts with on the screen. Each
element in the element tree corresponds to a widget in the widget tree.

Render Tree (Painting and Decoration)

 Finally, the house gets painted and decorated. The walls are given color,
and the floors are finished. This is the final step that makes the house
look and feel complete.

 In Flutter, this is like the render tree. It handles the actual drawing of the
elements on the screen, determining the colors, sizes, and positions.

Code Example: How the Trees Work Together

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('My App')),
body: Center(
child: Text('Hello, Flutter!'),
),
),
);

VINAYAK GOPAL 14
 MOBILE APPLICATION DEVELOPMENT

}
}

In the above code:

Widget Tree (Blueprint):

 MyApp widget  MaterialApp widget  Scaffold widget  AppBar

widget  Text widget.

 This is the structure of the app, but nothing is on the screen yet.

Element Tree (Actual House):

 When you run the app, Flutter takes this widget tree and creates an
element tree.

 The Scaffold, AppBar, and Text widgets are all turned into elements that
are displayed on your screen.

Render Tree (Painting and Decoration):

 The render tree takes care of drawing the AppBar with its color and the
Text with its style on the screen.

 This is the final step that makes the UI visible and interactive.

6.1 Stateless Widget and Element Trees

A stateless widget has the configuration (instructions) to create a stateless
element. Each stateless widget has a corresponding stateless element.
Flutter framework calls createElement method (create an instance of widget).
This stateless element is created and added to the element tree.

In simple words, Flutter framework request the widget to create an element

and then adds the element to element tree.

Each element contains a reference to the widget. The element calls the
widget’s build method to check for children widgets, and each child widget
(like an Icon or Text) creates its own element and is added to the element tree.
This process results in two trees: the widget tree and the element tree.
VINAYAK GOPAL 15
 MOBILE APPLICATION DEVELOPMENT

Widget Tree Element

 Stateless
 Book Details
Element

 Stateless
 Row
Element

 Stateless
 Icon
Element

 Stateless
 Text
Element

StatelessWi

Figure shows the BookDetails StatelessWidget that has Row, Icon, and Text
widgets representing the widget tree. The Flutter framework asks each widget
to create the element, and each element has a reference back to the widget.
This process happens for each widget down the widget tree and creates the
element tree. The widget contains the instructions to build the element
mounted on the screen.

Stateless Widget and Element Trees with example

1. StatelessWidget (BookDetails):

VINAYAK GOPAL 16
 MOBILE APPLICATION DEVELOPMENT

 The BookDetails class extends StatelessWidget, meaning it doesn’t change after it’s
created. It only has a build method that defines the UI.

2. Widget Tree:
 Inside the build method, a Row widget is created. This Row widget has two children:
an Icon widget and a Text widget. These three widgets (Row, Icon, and Text) form
the widget tree.
 Think of the widget tree as a blueprint that describes what the UI should look like. In
this case, the blueprint says: "I want a row with an icon and some text."

3. Element Tree:

 When Flutter processes this widget tree, it creates corresponding elements for each
widget.
 Flutter calls the createElement method to create an element for the Row widget.
Then, it creates elements for the Icon and Text widgets as well.
 These elements are linked to their respective widgets and form the element tree.

4. Mounting the Elements:

 The element tree is what actually gets displayed on the screen. It’s like taking the
blueprint (widget tree) and constructing the actual UI (element tree).
 The Row element knows that it has two children, so it arranges the Icon and Text
elements side by side on the screen.

6.2 Stateful Widget and Element Trees

A stateful widget has the configuration to create a stateful element. Each

stateful widget has a corresponding stateful element. The Flutter framework
calls the createElement method to create the stateful element, and the
stateful element is mounted to the element tree. Since this is a stateful widget,
the stateful element requests the widget to create a state object by calling the
StatefulWidget class’s createState method.

The stateful element now has a reference to the state object and the widget at
the given location in the element tree. The stateful element calls the state
object widget’s build method to check for child widgets, and each child widget
creates its own element and is mounted to the element tree. This process
results in two trees: the widget tree and the element tree. Note that if a child
VINAYAK GOPAL 17
 MOBILE APPLICATION DEVELOPMENT

widget displaying the state (car details) is a stateless widget like the Text
widget, then the element created for this widget is a stateless element.

The state object maintains a reference to the widget (StatefulWidget class) and
also handles the construction for the Text widget with the latest value. Figure
shows the widget tree, the element tree, and the state object. Note that the
stateful element has a reference to the stateful widget and the state object

To update the UI with new data, you use the setState() method, as explained in
the "StatefulWidget Lifecycle" section. This method updates the values of the
data (variables) and marks the element as "dirty" (meaning it has changed),
which triggers the UI to be refreshed. When the UI refreshes, the build method
of the state object is called again to rebuild the child widgets. A new widget is
created with the updated data, and the old widget is removed.

For example, in a StatefulWidget called CarDetails, if you want to change a

Text widget from showing 'Car: Audi' to 'Car: BMW', you would update the car
variable to 'Car: BMW' inside setState(). This change marks the element as
dirty, and the build method refreshes the UI with the new Text widget showing
'Car: BMW', while the old 'Car: Audi' widget is removed.
class CarDetails extends StatefulWidget {

@override

VINAYAK GOPAL 18
 MOBILE APPLICATION DEVELOPMENT

CarDetailsState createState() => CarDetailsState();

}

class CarDetailsState extends State<CarDetails> {

String car = 'Car: Audi';
void _onPressed() {
setState(() {
car = 'Car: BMW';
});
}

@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Icon(Icons.car_repair),
Text('$car'),
TextButton(
onPressed: _onPressed,
child: const Text('Change Car'),
),
],
);
}
}

Updating the state process

When both the old and new widgets are of the same type (like Text widgets),
the existing element simply updates its reference to the new widget, and the

VINAYAK GOPAL 19
 MOBILE APPLICATION DEVELOPMENT

element remains in the element tree. Even though the old Text widget is
replaced, the element stays in place because it's still working with a Text
widget. This keeps the state intact, as state objects remain attached to the
element tree as long as the widget type doesn't change.

For example, when the old Text widget with the value 'Car: Audi' is replaced by
a new Text widget with the value 'Car: BMW' the element remains in the tree.
It just updates its reference to the new Text widget, maintaining the state and
the element tree structure.

In simple words:

1. Stateful Widget and Element: In Flutter, when you create something

called a "stateful widget," it can change over time. This widget has a
special companion called a "stateful element." Think of the widget as a
blueprint and the element as the actual object that follows the
blueprint.

2. Creating and Placing the Element: Flutter automatically creates this

stateful element and places it into a structure called the "element tree,"
which is like a map of all the parts of your app that you see on the
screen.

3. Creating State: Because this widget is stateful, the element asks the
widget to create something called a "state object." This state object is
responsible for keeping track of any changes or updates.

4. Building the UI: The stateful element, now connected to both the widget
and the state object, asks the state object to build the UI (the look of
your app) by calling a method called build. This method outlines what
child widgets (like text, buttons, etc.) should appear. Each of these child
widgets also creates its own element and is added to the element tree.

5. Two Trees: The process of building the UI results in two parallel

structures: the "widget tree" (the blueprints) and the "element tree"
(the actual objects displayed on the screen). For example, if a child
widget is simple and doesn’t need to change (like a Text widget showing
car details), it creates a "stateless element."

6. Updating the UI with setState: When you want to change something in

the UI (like updating the text from "Car: Audi" to "Car: BMW"), you use a

VINAYAK GOPAL 20
 MOBILE APPLICATION DEVELOPMENT

method called setState(). This method changes the value in the state
object (like changing the car variable) and tells Flutter that the UI needs
to be refreshed. The build method is called again, and the UI is updated
with the new information.

7. Replacing Widgets: When the UI refreshes, if the type of widget doesn’t

change (like going from one Text widget to another Text widget), the
element stays in place, but it updates to point to the new widget. This
keeps the state (like the car's details) intact while showing the updated
information.

In short, a stateful widget can change over time, and when you use setState()
to update something, Flutter refreshes the UI to show the new information.
Even though the widgets might be replaced, the underlying element and state
remain connected as long as the widget type doesn’t change.

Updated state for the widget tree and element tree

INSTALLING THE FLUTTER SDK

VINAYAK GOPAL 21
 MOBILE APPLICATION DEVELOPMENT

For installation of Flutter, refer the attached ‘Flutter Installation Guide’

document.

VINAYAK GOPAL 22