Mobile Application Development using Flutter
(MADF) (2101CS402)
Unit : 1.2
Introduction to
Flutter
Prof. Mehul Bhundiya
Computer Science & Engineering Department
Darshan Institute of Engineering & Technology, Rajkot
[email protected] +91 - 9428231065
Flutter
Flutter Introduction
Flutter Introduction
Flutter is an open source framework developed by Google
It used for building beautiful, natively compiled, multi-platform applications from a single
codebase.
It uses dart as a programming language for fast apps on any platform.
The first version of Flutter was known as Sky and ran on the Android operating system.
Flutter 1.0 was release on 11 December, 2019.
Flutter 3.3 was announced On August 30, 2022.
It Support two themes
Material Design widgets implement Google's design language of the same name.
Cupertino widgets implement Apple's iOS Human interface guidelines.
Flutter Supports IDES and Editors via plugin.
IntelliJ IDEA Visual Studio Code
Android Studio Emacs
#2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul Bhundiya 3
Flutter Architecture
Flutter is a cross-platform UI toolkit.
It is designed to allow code reuse across operating systems such as iOS and Android.
During development apps run in a VM that offers stateful hot reload of changes without
needing a full recompile.
For release apps are compiled directly to machine code or to JavaScript if targeting the web.
It is designed as an extensible, layered system.
Every part of the framework level is designed to be optional and replaceable.
#2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul Bhundiya 4
Flutter Architecture
#2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul Bhundiya 5
Flutter Architecture
Flutter is designed as an extensible, layered system.
It exists as a series of independent libraries that each depend on the underlying layer.
No layer has privileged access to the layer below, and every part of the framework level is
designed to be optional and replaceable.
Flutter applications are packaged in the same way as any other native application.
Embedder (lowest layer)
Engine
Framework (highest layer)
#2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul Bhundiya 6
Embedder layer
An entry point is provided by a platform-specific embedder.
It coordinates with the underlying operating system to access services such as
accessibility,
rendering surfaces,
input.
The embedder is written in a platform-specific language like.
Java and C++ for Android
Objective-C/Objective-C++ for iOS and macOS
C++ for Windows and Linux
Flutter code can be embedded into an existing application as a module or as the complete
application’s content using the embedder.
#2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul Bhundiya 7
Engine layer
The engine layer is written in C/C++.
It takes care of the input, output, network requests.
It handles the difficult translation of rendering whenever a frame needs to be painted.
Flutter uses Skia as its rendering engine.
It is revealed to the Flutter framework through the dart : ui.
It wraps the principal C++ code in Dart classes.
#2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul Bhundiya 8
Framework layer
The framework layer is the part where users can interact with Flutter.
The Flutter framework provides a reactive framework that is written in Dart.
It comprises of
Rendering
Widgets
Material and Cupertino
It also has foundational classes and building block services like animation, drawing, and
gestures, which are required for writing a Flutter application.
#2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul Bhundiya 9
Flutter widgets
The first thing to note is that in Flutter, everything is a widget.
A widget is simply an instruction that you place within your code and they are the basic
building blocks of a Flutter application’s UI.
Widgets indicate how its configuration and status should appear in their display.
When a widget’s state changes, it rebuilds its description.
The framework compares to the previous description to see what changes in the underlying
render tree to transition from one state to the next.
A widget can be in the form of a button, an image, an icon, or a layout, and placing the
widgets together creates a widget tree.
#2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul Bhundiya 10
Widget States
State is the behavior of an app at any given moment.
It is a widget’s information when it is first created and how it defines the properties of that
widget.
This information might change during the lifetime of the widget.
To build the UI in Flutter there is two types of widgets:
Stateless widgets
Stateful widgets
#2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul Bhundiya 11
Stateless Widget
A stateless widget is a widget that describes part of the user interface by building a design
that describe the user interface.
Stateless widget are useful when user interface does not depend other than the configuration
information.
The build method of a stateless widget is typically only called in three situations:
The first time the widget is inserted in the tree.
Widget's parent changes its configuration.
When an InheritedWidget it depends on changes.
#2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul Bhundiya 12
Stateless Widget
Program
1 class GreenFrog extends StatelessWidget
2 {
3 const GreenFrog({ super.key });
4
5 @override
6 Widget build(BuildContext context)
7 {
8 return Container(
9 color: const Color(0xFF2DBD3A),
10 );
11 }
12 }
#2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul Bhundiya 13
Stateful Widget
A Stateful Widget has its own mutable state.
It is modified according to the user’s input.
It is looks for two things
The changed state based on its previous state.
An updated view of the user interface.
A Stateful Widget triggers a build() method again for creating its children widgets and the
subclass of the state holds the related data.
It is often used in cases where redrawing of a widget is needed.
A Stateful Widget can change when:
There is a User Input included
There are some User Interaction
There are some Dynamic Changes
#2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul Bhundiya 14
Stateful Widget
Syntax
1 class MyApp extends StatefulWidget {
2 const MyApp({Key? key}) : super(key: key);
3
4 @override
5 State<MyApp> createState() => _MyAppState();
6 }
7
8 class _MyAppState extends State<MyApp> {
9 @override
10 Widget build(BuildContext context) {
11 return Container();
12 }
13 }
The MyApp is a class that extends Stateful Widget.
A generic method createState() creates a mutable state.
The _MyAppState class extends another state.
#2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul Bhundiya 15
Stateful Widget Life Cycle
The data used by the widget might change.
The data can't be read synchronously when the widget is built.
All state must be established by the time the build method is called.
The lifecycle has the following simplified steps:
createState()
mounted == true
initState()
didChangeDependencies()
build()
didUpdateWidget()
setState()
deactivate()
dispose()
mounted == false
#2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul Bhundiya 16
Stateful Widget Life Cycle
createState()
When we create build a StatefulWidget, it immediately calls createState().
This method must exist.
BuildContext is the widget associated with the state.
Syntax
1 class MyHomePage extends StatefulWidget {
2 @override
3 _MyHomePageState createState() => new _MyHomePageState();
4 }
BuildContext (mounted == true)
It provides information regarding which widget is to be built/re-build.
BuildContext is the widget associated with the state.
Syntax
1 Widget build(BuildContext context) {
2 return Container();
3 }
#2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul Bhundiya 17
Stateful Widget
initState()
This method is the entry point of a widget.
It initializes all the methods that the build method will depend upon.
This is called only once in a widget’s lifetime
Syntax
1 initState() {
2 super.init();
3 }
didChangeDependencies()
It is used for loading the dependencies required for execution of a state.
The didChangeDependencies() is called immediately after the initState() is called.
It repaints the widgets that rely on that state for configuration.
Syntax
1 void didChangeDependencies() {
2 }
#2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul Bhundiya 18
Stateful Widget
build()
This method is called often It is a required, @override and must return a Widget.
Syntax
1 Widget build(BuildContext context) {
2 return Container();
3 }
didUpdateWidget(Widget oldWidget)
didUpdateWidget() is called if the parent widget changes and has to rebuild this widget.
it's being rebuilt with the same runtimeType, then this method is called.
Flutter is re-using the state, which is long lived.
In this case, required is to initialize some data again, as one would in initState().
Syntax
1 @override
2 void didUpdateWidget(Widget oldWidget) {
3 if (oldWidgetsx.importantProperty != widget.importantProperty)
4 {
5 _init();
6 }
} Bhundiya #2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul 19
Stateful Widget
SetState()
A State object is used to modify the user interface.
It executes the code for a particular callback.
It repaints the widgets that rely on that state for configuration.
Syntax
1 setState(() {});
deactivate()
This method is called when State is removed from the tree.
It might be reinserted before the current frame change is finished.
This method exists basically because State objects can be moved from one point in a tree to another.
Syntax
1 void deactivate(){
2 super.deactivate();
3 }
#2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul Bhundiya 20
Stateful Widget Life Cycle
dispose()
This method is used for removing an object permanently from the widget tree.
It is used when we need to clear up the memory by invoking super.dispose().
Syntax
1 void dispose(){
2 super.dispose();
3 }
#2101CS402 (MDAF) Unit 1 – Introduction to dart programming
Prof. Mehul Bhundiya 21
Thank You
