Cross Platform Mobile

Application Development

1 / 32
Introduction to Widget Tree
●
The widget tree is the root of the widget hierarchy. It
is created by the runApp() function and contains all
the widgets that make up the app’s UI.
●
An element tree is a representation of the widget
tree at a specific point in time. It is created by the
Flutter framework when the widget tree is built.
●
The render object tree is a representation of the
widget tree. The widget tree, which serves as the
foundation for the app’s user interface, is used to
construct the element tree and render object tree.

2 / 32
The following are the widgets (usable only
with Material Design)that you’ll use to create
the full and shallow widget tree

●
Scaffold —Implements the Material Design
visual layout, allowing the use of Flutter’
Material Components widgets
●
AppBar —Implements the toolbar at the top
of the screen
●
CircleAvatar —Usually used to show a
rounded user profile photo, but you can use it
for any image
●
Divider —Draws a horizontal line with
padding above and below
3 / 32
●
Cupertino you can use two different scaffolds, a page scaffold
or a tab scaffold.
●
CupertinoPageScaffold —Implements the iOS visual layout for a
page. It works with CupertinoNavigationBar to provide the use
of Flutter’s Cupertino iOS-style widgets.
●
CupertinoTabScaffold —Implements the iOS visual layout. This
is used to navigate mul- tiple pages, with the tabs at the
bottom of the screen allowing you to use Flutter’s Cupertino
iOS-style widgets.
●
CupertinoNavigationBar —Implements the iOS visual layout
toolbar at the top of the screen.

4 / 32
Material Design vs.
Cupertino Widgets

5 / 32
The following widgets can be used with
both Material Design and Cupertino:
●
SingleChildScrollview —This adds vertical or horizontal scrolling
ability to a single child widget.
●
Padding —This adds left, top, right, and bottom padding.
●
Column —This displays a vertical list of child widgets.
●
Row —This displays a horizontal list of child widgets.
●
Container —This widget can be used as an empty placeholder
(invisible) or can specify height, width, color, transform (rotate,
move, skew), and many more properties
●
Expanded —This expands and fills the available space for the
child widget that belongs to a Column or Row widget.
●
Text —The Text widget is a great way to display labels on the
screen.
●
Stack —What a powerful widget! Stack lets you stack widgets
on top of each other and use a Positioned (optional) widget to
6 / 32
align each child of the Stack for the layout needed.
BUILDING THE FULL
WIDGET TREE
●
Need to explain the code
●
a combination of Column , Row , Container ,
CircleAvatar , Divider , Padding , and Text
widgets.

7 / 32
8 / 32
BUILDING A SHALLOW
WIDGET TREE
●
To make the example code more readable
and maintainable, you’ll refactor major
sections of the code into separate entities.
You have multiple refactor options, and the
most common techniques are constants,
methods, and widget classes.

9 / 32
Refactoring with a Constant

10 / 32
Refactoring with a Method

11 / 32
Refactoring with a Widget
Class
●
Refactoring with a widget class allows you to create the
widget by subclassing the StatelessWidget class.
●
You can create reusable widgets within the current or
separate Dart file and initiate them anywhere in the
application. Notice that the constructor starts with a const
keyword, which allows you to cache and reuse the widget.
When calling the constructor to initiate the widget, use
the const keyword.
●
By calling with the const keyword, the widget does not
rebuild when other widgets change their state in the tree.
If you omit the const keyword, the widget will be called
every time the parent widget redraws.

12 / 32
13 / 32
Flutter TextField

●
TextField is used to get text input from user.
●
The default behavior of TextField is that,
when you press on it, it gets focus and a
keyboard slides from the bottom of the
screen.
●
When you enter text using keyboard, the
string is displayed in the TextField.

14 / 32
15 / 32
Flutter –
FloatingActionButton
●
A floating action button is a circular icon
button that hovers over content to promote a
primary action in the application.

16 / 32
Flat Button

●
FlatButton is usually used to display buttons
that lead to secondary functionalities of the
application like viewing all files of Gallery,
opening Camera, changing permissions etc.
●
FlatButton does not have an elevation unlike
Raised Button. Also, by default, there is no
color to the button and text is black.

17 / 32
18 / 32
RaisedButton

●
RaisedButton widget is a material design concept of a button
with elevation. It provides dimensionality to your UI along z-axis
with clues of shadow.
●
You can set many properties of RaisedButton like text color,
button color, color of button when disabled, animation time,
shape, elevation, padding, etc.
●
You can also disable the button using enabled property.
●
There are callback functions:
●
onPressed() is triggered when user presses this button.
●
onLongPress() is triggered when user long presses on this
button.

19 / 32
20 / 32
IconButton

●
Flutter IconButton acts just like a button, but
with an icon instead of an usual button.
●
You can execute a set of statements when
the IconButton is pressed using onPressed
property. Also, you get the animations like
splash when you click this IconButton, just
like a regular button.
●
If you do not specify onPressed property (not
even null), the IconButton is displayed as
disabled button.
21 / 32
22 / 32
PopupMenuButton

●
Displays a menu when pressed and calls
onSelected when the menu is dismissed
because an item was selected.
●
The value passed to onSelected is the value
of the selected menu item.
●
If we focus on an Application, We can see in
every Application there is a Pop Up Menu
button that will do some work. So in this
article, we will implement the pop-up menu
button.
23 / 32
24 / 32
ButtonBar

●
The ButtonBar widget is basically a container
that arranges a group of buttons in a
horizontal manner. This widget makes
creating a row of buttons easier without
hassling over additional alignment and
padding issues.
●
The ButtonBar widget has various
applications, but it is mainly used in
situations where multiple buttons are needed
to be displayed together in a uniform
manner, such as in a toolbar or a form.
25 / 32
●
The ButtonBar widget proposes a number of various
properties for modification according to the user's needs.
These properties can be specified by you in any manner
you want the widget to perform and look
●
Some of these properties include:
●
Alignment
●
Button height
●
Padding
●
Children
●
Main Axis Size

26 / 32
●
Example at:
https://www.educative.io/answers/how-to-
use-buttonbar-in-flutter

27 / 32
Image

●
Flutter Image widget displays an image in our
Flutter Application.
●
const Image(
image:
NetworkImage('https://www.abc.com/img/lion
.jpg'),
)

28 / 32
29 / 32
Flutter Icon
●
Icons can be used as a representative symbol for a quick
understanding of the functionality, or path of the navigation,
etc.
●
Following are the list of examples we shall discuss.
●
Basic Icon widget example, with default values.
●
Change Icon Size using size property.
●
Change Icon Color using color property.
●
Icon with a Text Label below it with the help of Column widget

30 / 32
31 / 32
More Examples at

●
https://www.tutorialkart.com/flutter/flutter-ap
pbar/#gsc.tab=0
●
https://www.educative.io

32 / 32