BUILDING FLUTTER UI

WITH WIDGETS
ICT425 MOBILE APPLICATION DEVELOPMENT
PRASHAYA FUSIRIPONG (PH.D.)
 1.Text widget
2.Icon widget
3.Image widget
OUTLINE
4.Layout
5.Input widget
6.Styling the widget
TEXT WIDGET

• Text widget can display a

‘string’ to the screen
 Text(“hello world”),

• Text widget have properties

to control over the text’s
size, font, weight, color, and
more with its style property
 Text will be modified style
with ‘TextStyle class’ via
‘style’ Text widget property
STYLING THE WIDGETS
• TextStyle supports many
properties to change the style
of text in ‘TextWidget’
 color:- any of the valid 16+
million colors
 decoration:- underline, overline,
strikethrough, none
 fontSize:- number of pixels tall to
make the characters (default
size is 14.0 pixels)
 fontStyle:- italic or normal
 fontWeight:- bold or normal
 fontFamily:- family name
ICON WIDGET

• Flutter framework prepare the Icons class

to be used into the flutter apps
 The class has hundreds of static values like
Icons.phone_android and
Icons.phone_iphone and Icons.cake

• How to put a big red

birthday cake on
flutter app
IMAGE WIDGET

• Displaying images in flutter app is a bit more complex than Text or

Icons
• All images can display in flutter app must involve as:
 Getting the image source
 Image embedded in the app (Never change it)
 Image fetched from the internet
 Sizing the image:- scaling image up or down to the right size and
shape
IMAGE WIDGET
• Embedded images
 Embedded images are much faster but will increase the flutter app’s install
size
 Embedded images must put image files in the flutter project folder
 Needed to modify the “pubspec.yaml” file to allow the flutter project accept
and get the image files from project folder

 Save the “pubspec.yaml” file and run “flutter pub get” to have the flutter project
process the flie
IMAGE WIDGET
• Embedded images
 The flutter app get the images to render on the screen by calling the “asset”
constructor
For example:- Image.asset(“assets/images/photo1.jpg”,),
 Tip……
‘pubspec.yaml’ file hold all kind of great information about the flutter project.
 The file holds project metadata like the name, description, repository location, and
version number.
 The file holds the lists library dependencies and fonts
IMAGE WIDGET
• Network images
 Network images are much more like what web developers might be
accustomed to
 Network images is simply fetching an image over the Internet via http
 Using ‘network’ constructor and pass in a URL as a ‘string’ type
For example:- Image.network(imageUrl),
 Network images are slower than embedded image
 Network images are live; any image can be loaded dynamically by simply
changing the image URL
IMAGE WIDGET
• Sizing an image
 Flutter framework will shrink the image
to fit its container as called ‘BoxFit’
property
For example:
Image.asset(
‘assets/images/woman.jpg’,
fit: BoxFit.contain
),
LAYOUTS AND WIDGET HIERARCHY
• What is a Layout?
A layout in Flutter refers to how widget are arranged in relation to one another on the
screen. It involves position, spacing, and alignment to create the desired UI structure
• Widget tree:
In flutter, the user interface is built as a tree of widgets, where each widget is a node. The
parent-child relationship among widgets defines the hierarchy and layout of the UI
• Types of Layout widgets:
 Single-child layout widget
These widgets can have only one child widget. Example include Container, Center, Padding
 Multi-child layout widget
These widget can have multiple children. Example include Column, Row, Stack, ListView
TOP 20 MOST USED SINGLE-CHILD WIDGET IN FLUTTER
TOP 20 MOST USED MULTI-CHILD WIDGET IN FLUTTER
COMMONLY USED CONTAINER WIDGET
• A container class in flutter is a convenience widget that combines common painting,
positioning, and sizing of widgets
• A container class can be used to store one or more widgets and position them on the
screen
• A basic container element that stores a widget has a margin, border and padding
 Margin:- separates the present container from other contents
 Border:- Define a border of different shapes
for example, rounded rectangles
 Padding:- applies additional constraints to the padded extent
(incorporating the width and height as constraints, if either is non-null)
 STYLING THE WIDGETS
• Container decorations
 The decoration property support the BoxDecoration class
- The BoxDecoration class provides a variety of way to draw a box
 The BoxDecoration has a border
 The BoxDecoration has a boxShadow
 The BoxDecoration has a borderRadius
 The BoxDecoration has a shape

• Border class: a border of a box comprised of four sides: top, right, bottom, and left
• BoxShadow class: cast non-rectangular shadow if the box is non-rectangular (e.g., has a border
radius or a circular shape)
• BorderRadius class: specific offset in terms of visual corners e.g., properties as topLeft, topRight and
so on
• BoxShape enum: provide the normal two values as rectangle and circle shape, however, it can
modifies to many shape rely on the ‘painter’ property
COMMONLY USED ROW AND COLUMN WIDGET
• Row and Column widgets align children horizontally and vertically as per the
requirement
• Properties of Row and Column widgets:
 children: This property takes in List<Widget>, that is a list of widgets to display inside the Row or
the Column widget
 crossAxisAlignment: CrossAxisAlignment enum as the object to how the children’s widgets should
be places in crossAxisAlignment. For Row it is vertical and for Column it is horizontal
 mainAxisAlignment: MainAxisAlignment enum as the object to decide how the children widgets
should be place in mainAxisAlignment. For Row it is horizontal and for Column it is vertical
COMMONLY USED ROW WIDGET
• Row can create a horizontal array of children
• Alignment properties: using mainAxisAlignment and crossAxisAlignment
 Row’s mainAxis is horizontal
 cross Axis to Row’s main Axis is vertical
COMMONLY USED ROW WIDGET
• Row can create a vertical array of children
• Alignment properties: using mainAxisAlignment and crossAxisAlignment
 Row’s mainAxis is vertical
 cross Axis to Row’s main Axis is horizontal
COMMONLY USED EXPANDED WIDGET
• Expanded widget can be taken as the
child of Row, Column, and Flex
 if we don’t want to give equal spaces to
our children widgets we can distribute the
available space as our will using flex
parameter

• Adjusts the size of its child to fill the

available space
• The first Container with flex: 2 takes up
twice the space of the second
Container with flex: 1
COMMONLY USED STACK WIDGET
• Stack widget allows children to be
layered on top of each other
• Useful for creating complex layouts like
overlapping elements, banners, or
floating action button
• Stack contains three children: two
overlapping Container widgets and a
positioned Text widget
COMMONLY USED LISTVIEW WIDGET
• A scrollable list of widgets arranged
linearly
• Ideal for creating long, scrollable lists
of items
• Each listTile widget displays an icon,
a title, and a subtitle, forming a
simple contact list
INPUT WIDGET

• Flutter framework provides widgets for entering data (Input

widget)
• Input widgets are safer and give much control
• Input widgets do not maintain own state; we have to do it
manually
• Input widgets don’t play well together until you group them with a
Form widget
• Input widgets is to ‘text fields’, ‘checkbox’, ‘radio buttons’, ‘sliders’,
and ‘dropdowns’
TEXTFIELDS WIDGET
• Flutter app probably want a TextField widget waiting the data from users entry
• TextField widget should have a Text label to represent the data meaning:
For example:
const Text(“Search terms”),
TextField(
onChanged: (String val) => _searchTerm = val,
)
• The ‘onChanged’ property is an event handler that fires after every keystroke
 TextField widget will receive a single value – a “String” (the value come from user is
typing)
TEXTFIELDS WIDGET
• ‘TextFields’ widget as fancy by using the ‘InputDecoration’ widget
For example:
return TextField(
decoration: InputDecoration(
labelText: ‘Email’,
hintText: ‘[email protected]’,
icon: Icon(Icons.contact_mail),
),
),
TEXTFIELDS WIDGET
• “InputDecoration” widget provides many properties for
decorating the input widget as follow below:
Property Description
labelText appears above the TextField. Tells the user what this TextField is for
hintText light ghost text inside the TextField. disappears as the user begins typing
errorText error message that appears below the TextField. usually in red. It is set
automatically by validation (covered later)
prefixText Text in the TextField to the left of the stuff the user types in
suffixText same as prefixText but to the far right
Icon draws an icon to the left of the entire TextField
prefixIcon draws one inside the TextField to the left
suffixIcon same as prefixIcon but to the far right
TEXTFIELDS WIDGET
• ‘TextFields’ widget as fancy by using the ‘InputDecoration’ widget
For example:
return TextField(
decoration: InputDecoration(
labelText: ‘Password’,
hintText: ‘Password’,
icon: Icon(Icons.password),
),
),
TEXTFIELDS WIDGET
• ‘TextFields’ widget as fancy by using the ‘InputDecoration’ widget
For example:
return TextField(
keyboardType: TextInputType.number
decoration: InputDecoration(
labelText: ‘Phone number’,
hintText: “000 458 8524”,
icon: Icon(Icons.phone),
),
),
CHECKBOXES WIDGET
• ‘Checkboxes’ widget have a Boolean value property and an ‘onChanged’ method
with fires after every change.
• The ‘onChanged’ method receives the value that user set
• ‘Checkboxes’ value is a bool as result
• For example:
checkbox(
value: true,
onChanged: (bool val) => print(val)
),
• A flutter ‘switch’ widget serve the same purpose as a ‘checkbox’ widget
RADIO WIDGET
• The ‘radio button’ widget can be selected one, the others
in the same group are deselected within the same group.
 So flutter framework provide the ‘RadioListTile’ widget to create
the group of radio button

• The ‘RadioListTile’ is a widget that combines a radio button

with a list tile.
 Each RadioListTile represents a single option in the list and
consists of:
 Title
 Subtitle
 An optional leading and so on
SLIDER WIDGET
• The slider is a widget to select a value from a given range
in the application
• The slider widget can be implemented by simply and
provide the range values
• The slider widget takes two required parameters:
 value:- the default value whenever the app is launched and
should be of type double
 onChange:- This function is triggered whenever the slider value
is changed are changed and we get a double value which
we can use for further process
DROPDOWNBUTTON WIDGET
• The DropDownButton is a widget that
we can use to select one unique
value from a set of values
• The default value of dropdown
button should shows the currently
selected value
• The dropdown button can even
include a down arrow icon on the list On clicking the ‘dropdownbutton’ widget,
it open a list of items
DROPDOWNBUTTON WIDGET
• Dropdownlist property

Property Description
We use this property to define various
items that are to be defined in our
items
dropdown menu/list. It is a list of items
that users can select
value Value is the currently selected item
We use elevation property to elevate
Elevation On clicking the ‘dropdownbutton’ widget,
the dropdown menu/list
This property is used to display an it open a list of items
icon
icon to the dropdown button
We use the style property to style our
style text in the dropdown menu/list like
color, fontsize, fontweight, etc
STYLING THE WIDGETS
• Stacking widget: useful if you want to overlap several children in a simple way,
 For example having some text and an image, overlaid with a gradient and a button
attached to the bottom

• Positioned widget: the path from the Positioned widget to its enclosing Stack
 It can identify the different location of each content (e.g. text, image, and so on)
- top, left, bottom and right is to point the location within ‘Stack’ widget
Thank you
Prashaya Fusiripong (Ph.D.)
Email: [email protected]
Department of Information and communication technology (ICT), International college