Current trends in software Engineering

Flutter

Widgets

SLIIT - Faculty of Computing

CTSE – SE4010

Flutter
Architecture of Flutter Application

SLIIT - Faculty of Computing

CTSE – SE4010

SLIIT - Faculty of Computing

CTSE – SE4010

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 above example is as specified in the
following diagram:

SLIIT - Faculty of Computing

CTSE – SE4010

Widget Hierarchy
My App
(top level/ Root)

Material App

MyhomePage
(Property:home)

Center
Scaffold
(property:body)

Text
AppBar
(Property:Appbar)
That’ s it
(property:child)

SLIIT - Faculty of Computing

CTSE – SE4010

Widget Hierarchy in details

• 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.
• MyHomePage - is build using another flutter native widget,
Scaffold.
• Scaffold has two properties – body and appBar.
• 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.

SLIIT - Faculty of Computing

CTSE – SE4010

Widgets..
In Flutter, widgets can be grouped into multiple
categories based on their features, as listed below
• Platform specific widgets
• Layout widgets
• State maintenance widgets
• Platform independent / basic widgets

SLIIT - Faculty of Computing

CTSE – SE4010

Platform specific widgets

• Android specific widgets are designed in
accordance with Material design guideline by
Android OS. Android specific widgets are called as
Material widgets.
• iOS specific widgets are designed in accordance
with Human Interface Guidelines by Apple and they
are called as Cupertino widgets.

SLIIT - Faculty of Computing

CTSE – SE4010

Platform specific widgets

• Scaffold , AppBar, BottomNavigationBar ,TabBar , TabBarView , ListTile ,
RaisedButton , FloatingActionButton , FlatButton, IconButton ,
DropdownButton, PopupMenuButton , ButtonBar, TextField, Checkbox ,Radio ,
Switch ,Slider , Date & Time Pickers , SimpleDialog , AlertDialog
• CupertinoButton , CupertinoPicker , CupertinoDatePicker ,
CupertinoTimerPicker , CupertinoNavigationBar, CupertinoTabBar ,
CupertinoTabScaffold , CupertinoTabView , CupertinoTextField , CupertinoDialog
,CupertinoDialogAction , CupertinoFullscreenDialogTransition ,
CupertinoPageScaffold , CupertinoPageTransition , CupertinoActionSheet,
CupertinoActivityIndicator , CupertinoAlertDialog , CupertinoPopupSurface

SLIIT - Faculty of Computing

CTSE – SE4010

Layout widgets
To compose multiple widgets into a single widget, Flutter
provides large number of widgets with layout feature. For
example, the child widget can be centered using Center
widget.
Some of the popular layout widgets are as follows:
• Container: A rectangular box decorated using
BoxDecoration widgets with background, border and
shadow.
• Center: Center its child widget
• Row: Arrange its children in the horizontal direction.
• Column: Arrange its children in the vertical direction.
• Stack: Arrange one above the another.

SLIIT - Faculty of Computing

CTSE – SE4010

State maintenance widgets

• The dynamic nature of the application is through
interactive behavior of the widgets and the state
changes during interaction

SLIIT - Faculty of Computing

CTSE – SE4010

State maintenance widgets

The dynamic nature of the application is through interactive behavior of

the widgets and the state changes during interaction
StatelessWidget
Only requires a single method build to be implemented in its derived class. The build method gets
the context environment necessary to build the widgets through BuildContext parameter and
returns the widget it builds
Icon, IconButton, and Text are examples of stateless widgets.

StatefullWidget
Stateful can be thought of as redering through user input that becomes redering according to the
change of state. it can change its appearance in response to events triggered by user interactions or
when it receives data
Checkbox, Radio, Slider, InkWell, Form, and TextField are examples of stateful widgets

SLIIT - Faculty of Computing

CTSE – SE4010

States….?

Change the
count ???

SLIIT - Faculty of Computing

CTSE – SE4010

SLIIT - Faculty of Computing

CTSE – SE4010

Statefull Widget

SLIIT - Faculty of Computing

CTSE – SE4010

Platform independent / basic widgets

Text
Text widget is used to display a piece of string. The
style of the string can be set by using style property
and TextStyle class. The sample code for this purpose
is as follows:

 maxLines, int: Maximum number of lines to show

 overflow, TextOverFlow: Specify how visual overflow is handled using TextOverFlow
class
 style, TextStyle: Specify the style of the string using TextStyle class
 textAlign, TextAlign: Alignment of the text like right, left, justify, etc., using TextAlign
class
 textDirection, TextDirection: Direction of text to flow, either left-to-right or rightto-left

SLIIT - Faculty of Computing

CTSE – SE4010

Platform independent / basic

widgets
Image
Image widget provides different constructors to load
images from multiple sources and they are as follows:
 Image - Generic image loader using ImageProvider
Image.asset - Load image from flutter project’s assets
 Image.file - Load image from system folder
 Image.memory - Load image from memory
 Image.Network - Load image from network
The easiest option to load and display an image in
Flutter is by including the image as assets of the
application and load it into the widget on demand.
SLIIT - Faculty of Computing
CTSE – SE4010

Platform independent / basic

widgets
• Create a folder, assets in the project folder and place the necessary images.
• Specify the assets in the pubspec.yaml as shown below:

• Now, load and display the image in the application

The most important properties of the Image widget are as follows:

• image, ImageProvider: Actual image to load
• width, double - Width of the image
• height, double - Height of the image
• alignment, AlignmentGeometry - How to align the image within its bounds

SLIIT - Faculty of Computing

CTSE – SE4010

Platform independent / basic

widgets
Icon
Icon widget is used to display a glyph from a font
described in IconData class. The code to load a
simple email icon is as follows:

SLIIT - Faculty of Computing

CTSE – SE4010

Type of Layout Widgets

Widget supporting a single child
• Single Child Widgets In this category, widgets will have
only one widget as its child and every widget will have a
special layout functionality.
• For example, Center widget just centers it child widget
with respect to its parent widget and Container widget
provides complete flexibility to place it child at any
given place inside it using different option like padding,
decoration, etc.,
• Single child widgets are great options to create high
quality widget having single functionality such as
button, label, etc.,

SLIIT - Faculty of Computing

CTSE – SE4010

Single Child Widget

SLIIT - Faculty of Computing

CTSE – SE4010

Multiple Child Widgets

In this category, a given widget will have more than
one child widgets and the layout of each widget is
unique.

SLIIT - Faculty of Computing

CTSE – SE4010

Multiple Child Widgets

• Row - Allows to arrange its children in a horizontal
manner.
• Column - Allows to arrange its children in a vertical
manner.
• ListView - Allows to arrange its children as list.
• GridView - Allows to arrange its children as gallery.
• Expanded - Used to make the children of Row and
Column widget to occupy the maximum possible
area.

SLIIT - Faculty of Computing

CTSE – SE4010

Multiple Child Widgets

Mango

Vilat

Rs:256.00

SLIIT - Faculty of Computing

CTSE – SE4010

SLIIT - Faculty of Computing

CTSE – SE4010

Image rows

SLIIT - Faculty of Computing

CTSE – SE4010

Layout widgets
• https://github.com/bizz84/layout-demo-flutter

SLIIT - Faculty of Computing

CTSE – SE4010

Common layout widgets

standard widgets from the widgets library, and specialized

widgets from the Material library. Any app can use the
widgets library but only Material apps can use the Material
Components library.
Standard widgets
• Container: Adds padding, margins, borders, background color, or other decorations to a widget.
• GridView: Lays widgets out as a scrollable grid.
• ListView: Lays widgets out as a scrollable list.
• Stack: Overlaps a widget on top of another.
Material widgets
• Card: Organizes related info into a box with rounded corners and a drop shadow.
• ListTile: Organizes up to 3 lines of text, and optional leading and trailing icons, into a row.
•

SLIIT - Faculty of Computing

CTSE – SE4010

Container

• A convenience widget that combines common painting, positioning,

and sizing widgets.
• Containers with no children try to be as big as possible
unless the incoming constraints are unbounded
• Containers with children size them self to children
• Container can have one child

SLIIT - Faculty of Computing

CTSE – SE4010

Container

SLIIT - Faculty of Computing

CTSE – SE4010

Grid View

SLIIT - Faculty of Computing

CTSE – SE4010

ListView

SLIIT - Faculty of Computing

CTSE – SE4010

Stack

• Use for widgets that overlap another widget

• The first widget in the list of children is the base
widget; subsequent children are overlaid on top of
that base widget
• A Stack’s content can’t scroll
• You can choose to clip children that exceed the
render box

SLIIT - Faculty of Computing

CTSE – SE4010

Stack

SLIIT - Faculty of Computing

CTSE – SE4010

Hot Reload
Hot reload
• Hot reload feature quickly compile the newly added
code in our file and sent the code to Dart Virtual
Machine.
• After done updating the Code Dart Virtual Machine
update the app UI with widgets
• If you are using States in your application then Hot
Reload preservers the States so they will not update on
Hot Reload.
• Massively reduce the time from each development
cycle.

SLIIT - Faculty of Computing

CTSE – SE4010

Hot reload

SLIIT - Faculty of Computing

CTSE – SE4010

• Write Code

SLIIT - Faculty of Computing

CTSE – SE4010

SLIIT - Faculty of Computing

CTSE – SE4010

Hot Restart

SLIIT - Faculty of Computing

CTSE – SE4010

Hot Reload and Hot Restart ??

SLIIT - Faculty of Computing

CTSE – SE4010

Size Doesn’t Matter

SLIIT - Faculty of Computing

CTSE – SE4010

Custom Font ..

• Download the font you want

• Create directory in your project “Fonts”
• Open pubspec.html
• Indentation is very important

SLIIT - Faculty of Computing

CTSE – SE4010

Lets Create MiCard

SLIIT - Faculty of Computing