A FLUTTER

FRAMEWORK
ICT425 MOBILE APPLICATION DEVELOPMENT
PRASHAYA FUSIRIPONG (PH.D.)
 1. Flutter project structure
2. Introduce the widgets
3. Built-in Flutter widgets
OUTLINE
4. Types of widget
5. UI as Code
6. Stateless and Stateful widgets
 FLUTTER PROJECT ENVIRONMENT ON ANDROID STUDIO

• Selected simulator
• Running

Source code for Flutter application

Project structure
FLUTTER PROJECT STRUCTURE
• Flutter project folder:
 Android and IOS:- these are the platform-specific parts of the
project
 Lib:- the home of all of the dart source code (app’s hierarchy will
kept into the folder)
 Test:- the unit tests files can put all here
 Pubspec.yaml:- this file is essentially the project file for dart
projects such as:
 setting the project name
 project description
 dependencies library references
 permission to access assets
 and more…
 .gitignore and readme.md:- using git and github for the source
code repository
 .metadata and .package:- configuration files for flutter app
FLUTTER PROJECT STRUCTURE
• main() function: The entry point of the Flutter application
 Calls ‘runApp()’ to start the app

• MyApp class: The root widget of the app

 Contains the build method that returns the app’s widget tree

• MaterialApp widget: Defines the overall appearance and behavior of the app
 Properties: title, theme and home
 title: sets the app’s title
 theme: defines the app’s theme, including colors, fonts, and styles
 home: sets the initial widget to display when the app starts

• MyHomePage class: The main widget that displays the greeting message
 Contains the build method that returns the widget tree for the home page
• Scaffold widget: provides a basic layout structure
for the app
 Properties: appBar, and body
 appBar: defines the app bar at the top
 Body: sets the main content area of the app

• AppBar widget: Creates the app bar at the top of

the screen
 Contains a Text widget to display the app’s title

• Center widget: Centers its childe widget within its

available space

• Column widget: Arrange its children vertically

 Property: ‘mainAxisAlignment: controls how the
children are aligned within the column

• Text widget: Displays text content

 Property: ‘style’: defines the appearance of the text, including
font size, color, etc
HOW THE APP WORKS:
• The following breakdown explains how each component contributes to the
overall structure and functionality of the simple greeting message app:
 The main() function starts the app by calling ‘runApp(const MyApp())’
 The myApp widget builds the app’s structure using the ‘MaterialApp widget’
 The MaterialApp’s home property set the ‘MyHomePage’ as the initial widget
 The MyHomePage widget builds the home screen using a ‘Scaffold’ widget
 The Scaffold’s appBar displays the app’s title
 The Scaffold’s body contains a Center widget to center the greeting message
 The Center widget contains a ‘Column’ to vertically arrange the greeting text.
 The Text widget displays the greeting message “ICT 425 Mobile Application
Development” with a font size of 24
HIERARCHY
‘SCAFFOLD’
STRUCTURE
FLUTTER PROJECT STRUCTURE
• Running the flutter application
 emulator device
 Web browser
 physical device

• Hot reloading
 Making change the source code and rerun it when application is running on emulator device,
browser or physical device
 Recompiling and reloading with the same state, and same data
 It makes the development cycle ridiculously fast

• Debugging
 “step over” / “step into” / “force step into” / “step out”
INTRODUCE THE WIDGETS
• Widgets can be understood as the visual representation of parts of
the application (not only the visual)
• Widgets are put together to compose the UI of an application
• The main characteristics of the widgets UI in Flutter are:
 Composability:- Flutter choose composition to be a simple, well-defined and flexibility
 Immutability:- Flutter is based on the reactive style of programming (widget instances)

• A Flutter widget may have a state associated with it, and when
the associated state changes
 The terms state and reactive are well known in the React style of
programming
INTRODUCE THE WIDGETS
• Flutter widgets are everywhere in an application
• A widget represents a part of a UI
• Widgets can be any of following:
 A visual/structural element that is a basic structural element (button or text
widgets)
 A layout specific element that may define the position, margins or padding
 A style element that may help to colorize and theme
 An interaction element that help to respond to interactions (i.e.
GestureDetector widget)
 INTRODUCE THE WIDGETS
• Widgets are the basic building
blocks of an interface
• Flutter organizes the widgets in a
widget tree
• The widget tree is the logical
representation of all the UIs widgets
• All widgets is computed during
layout (structural info) and
rendering (screen) and testing
(touch interaction)
 INTRODUCE THE WIDGETS
• Widgets are represented in the tree
nodes
 Every change to widgets state
results in rebuilding the widgets
and the child involved
• Flutter’s built-in widget exposing
child or children properties,
depending on the purpose of the
widget
BUILT-IN FLUTTER WIDGETS
• Flutter’s foundation widgets
are the building blocks of
everything
• They fall into these major
categories:
 Value widgets
 Layout widgets
 Navigation widgets
 Other widgets
VALUE WIDGETS
• The value widgets can hold a value that maybe come from local
storage, a service on the internet, or from the user themselves.
• The value widgets are used to display values to the user and to
get values from the user into the app
LAYOUT WIDGETS
• Layout widgets give us tons
of control in making our
scene lay out properly
 placing widgets side by side
or above and beneath
 making them scrollable
 making them wrap
 determining the space
around widgets
NAVIGATION WIDGETS
• Navigation widgets will control one scene and then moves to the
next scene
• Navigation widgets as button that is located on tab bar / in a
drawer that slides in from the left side of the screen
OTHER WIDGETS
• Here are some miscellaneous widgets:

• ‘GestureDetector’ widget is crucial for responding to Gestures

UI AS CODE
• Dart language express an app’s graphical user interface as well as
the behavior

Framework Behavior UI
Xamarin C# XAML
React Native JavaScript JSX
Native Script JavaScript XML
Flutter Dart Dart
STATELESS AND STATEFUL WIDGETS

• Widgets describe what their view should look like given their
current configuration and state
• Types of widgets:
 StatelessWidget: A widget that does not require any mutable state. Its
configuration and appearance are immutable after being create
 StatefulWidget: A widget that can hold and change its internal state
over time. It is used for interactive elements that can change
dynamically
WHAT ARE ‘STATELESS’ WIDGETS?
• A stateless widget is one that does not have any mutable state
• The only area of focus of a stateless widget is the information displayed and the user
interface
• They deal with situation that are independent of the user’s input
• A stateless widget does not tell the framework when to remove it or rebuild it
• They create user interfaces that do not change dynamically upon updation in the
nearby values
• We use a stateless widget when we create an application that does not require
redrawing a widget again and again
STATELESS WIDGETS
• Structrue: StatelessWidget must override the build method to
describe the part of the user interface represented by this widget
• Use cases for StatelessWidget
 Displaying static content like labels, icons, or decorative elements
 Layout containers that do not require user interaction, such as
Containers, Padding, and Column
STATELESS AND STATEFUL WIDGETS
• StatelessApp and MyCustomWidget
are stateless widgets.
• The ‘Text’ widget inside
MyCustomWidget is immutable, and
its state does not change during the
lifecycle of the widget
WHAT ARE ‘STATEFUL’ WIDGETS?
• A stateful widget has its own mutable state that it needs to track. It is modified
according to the user’s input
• A stateful widget looks after twin things primarily, the changed state based on its
previous state and an updated view of the user interface
• A track of the previous state value has to be looked at because there is a need to self-
rebuild the widget to show the new changes made to your application
• A stateful widget triggers a build method 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
STATEFUL WIDGETS
• Structure: A ‘StatefulWidget’ consists of two classes:
 ‘StatefulWidget’ class: This is immutable and can be recreated if the
parent widget tree changes
 ‘State’ class: contains the mutable state for the widget and the build
method that describes the part of the user interface

• Use Cases for StatefulWidget

 Forms where user input needs to be stored and updated dynamically
 Apps that require real-time updates, such as counters, timers and
interactive elements.
KEY DIFFERENCES BETWEEN STATELESS AND STATEFUL WIDGETS

Feature StatelessWidget StatefulWidget

State Immutable; cannot change Mutable; can be changed during
widget’s lifecycle
UI updates Does not change; static UI Can re-render when state changes
occur
Lifecycle methods Only build method Multiple lifecycle methods: initState,
build, dispose, etc
Use cases Static UI elements like text, Dynamic elements like forms,
icons and images animations and interactive widgets
LIFE CYCLE OF STATEFULWIDGET
• Key lifecycle Methods:
 initState()
Called when the widget is created for
the first time. Used for initializing data
 build()
Called whenever the state changes or
the widget is first built
 setState()
Used to update the state and trigger a UI
rebuild
 dispose()
Called when the widget is removed form
the widget tree. Used for cleanup tasks
‘STATE’ IN STATEFULWIDGET

• The ‘state’ class is responsible to:

 Define and maintain the state data
 Define the ‘build()’ method – It knows how to draw the widget on screen
 Define any callback function needed for data gathering or event handling

• Why separate widget and state class?

 First reason is the single responsibility principle; one class responsible for
drawing the widget and another thing responsible for dealing with
data
 Second reason is the processor process can handle independently,
due to redrawing and recalculating take time
UNDERSTANDING ‘STATE’ IN
STATEFULWIDGET
• Create FancyHelloPage class (handling the
widget elements) that extended from
‘StatefulWidget’ class
• Implement the overriding method name is
‘createState’ method to call
‘_FancyHellowPageState’ class
• Create ‘_FancyHellowPageState’ class
(handling the ‘state’ (data) of widgets) that
extended from ‘state’ class
• Implement the overriding method name is
‘build’ method to handle ‘state’ (data) of
widgets
STEPS OF ‘STATE’ PROCESSING IN STATEFULWIDGET
Status of variable

String str = ‘Hello’; 1

widget
Status of variable
Text (str)
Str = ‘Hello Flutter application’
3
widget
2 Text (str)
Status change

setState(()=> str = ‘Hello Flutter application’);

HOW TO IMPLEMENT THE STATEFUL WIDGET?

• There are many way to implement the

‘setState’ method supporting the widget
state changed.
 Creating the method to support the state
changed
 Using the arrow function in the ‘build’ method
The function is a process
in the data changing
on widget
Thank you
Prashaya Fusiripong (Ph.D.)
Email: [email protected]
Department of Information and communication technology (ICT), International college