Chapter # 8

Flutter-Part 2
Getting started with Flutter
SWE483 - Mobile Applications Development
 Flutter UI
https://flutter.dev/docs/development/ui/widgets-intro
https://api.flutter.dev/flutter/widgets/Container-class.html
 3

Flutter UI:
• Flutter provides a number of widgets that help you build apps that follow Material
Design (common mobile app design: it is a good practice)
• A Material app starts with the MaterialApp widget, which builds a number of
useful widgets at the root of the app, including a Navigator
• Navigator manages a stack of widgets identified by strings, also known as
“routes”. It allows smooth transition between screens of the application..
 4

Flutter UI: Basic Widgets

• Text: The Text widget lets create a run of styled text within the application.
• Row, Column: These flex widgets let creating flexible layouts in both the horizontal
(Row) and vertical (Column) directions.
• Stack: Instead of being linearly oriented (either horizontally or vertically),
a Stack widget lets placing overlapped widgets in paint order. the Positioned widget
could be used on children of a Stack to position them relative to the top, right,
bottom, or left edge of the stack
• Container: The Container widget lets creating a rectangular visual element. It can be
decorated with a BoxDecoration, such as a background, a border, or a shadow.
A Container can also have margins, padding, and constraints applied to its size.
 6

Flutter UI: Layouts

• The core of Flutter’s layout mechanism is widgets
• Widgets are classes used to build UIs
• Widgets are used for both layout and UI elements
• Complex widgets are built by composing simple
widgets
• Example
 7

Flutter UI: Lay out a widget

1- Select a layout widget:

Choose from a variety of

layout widgets based on how we want
to align or constrain the visible widget, aspectRatio: 16 / 9

as these characteristics are typically

passed on to the contained widget.

https://flutter.dev/docs/development/ui/widgets/layout
 8

Flutter UI: Lay out a widget

2. Create a visible widget
• Create a Text widget:

• Create an Image widget:

• Create an Icon widget:

 9

Flutter UI: Lay out a widget

3. Add the visible widget to the layout widget
• All layout widgets have either of the following:
• A child property if they take a single child—for example, Center or Container
• A children property if they take a list of widgets—for example, Row, Column, ListView,
or Stack.
• Example: add the Text widget to the Center widget:
 10

Flutter UI: Layout a widget

4. Add the layout widget to the page (1)

• A Flutter app is itself a widget, and most widgets

have a build() method. Instantiating and returning a
widget in the app’s build() method displays the
widget.

• Material apps: For a Material app, Scaffold widget

could be used; it provides a default banner,
background color, and has API for adding drawers,
snack bars, and bottom sheets. Then
the Center widget could be added directly to
the body property for the home page.
Material apps Scaffold
 11

Bottom sheets Drawers Snack bars

 12

Flutter UI: Layout a widget

4. Add the layout widget to the page (2)
• Non-Material apps: For a non-Material
app, you can add the Center widget to the
app’s build() method
 13

Flutter UI: Common layout widgets

• 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.
 14

Flutter UI: Common layout widgets-

Container This layout consists of a column with two rows, each containing 2 images. A
Container is used to change the background color of the column to a lighter grey.

• Many layouts make liberal use of

Containers to separate widgets using
padding, or to add borders or
margins.
• In Container it is possible to:
• Add padding, margins, borders,
• Change background color or image,
• It contains a single child widget, but A Container is also used to add a rounded border and margins to each image
Container(
that child can be a Row, Column, or decoration: BoxDecoration(
even the root of a widget tree border: Border.all(width: 10, color: Colors.black38),
borderRadius: const BorderRadius.all(Radius.circular(8)),
),
margin: const EdgeInsets.all(4),
child: Image.asset('images/pic$imageIndex.jpg’),
)
 15

Flutter UI: Basic Widgets Example

• To use the predefined set of Material icons, uses-material-design: true entry should be added in
the flutter section of your pubspec.yamlfile
• Many Material Design widgets need to be inside of a MaterialApp to display properly.
• The MyAppBar widget creates a Container with a height of 56 device-independent pixels with an
internal padding of 8 pixels, both on the left and the right.
• Inside the container, MyAppBar uses a Row layout to organize its children.
• The middle child, the title widget, is marked as Expanded, which means it expands to fill any remaining
available space that hasn’t been consumed by the other children. Multiple Expanded children could be
added and determine the ratio in which they consume the available space using the flex argument
to Expanded.
• The MyScaffold widget organizes its children in a vertical column: 1) at the top of the column it places
an instance of MyAppBar, passing the app bar a Text widget to use as its title. 2) it uses an Expanded
to fill the remaining space with its body, which consists of a centered message.
 16

AppBar Widget
• The AppBar displays the toolbar widgets, leading, title, and actions, above
the bottom (if any). The bottom is usually used for a TabBar. If a
flexibleSpace widget is specified then it is stacked behind the toolbar and
the bottom widget.
• The following diagram shows where each of these slots appears in the
toolbar when the writing language is left-to-right
 17

Flutter UI: Basic Widgets Example

 18

Flutter UI: Basic Widgets Example

 19

Flutter UI:
Material Components Example

• Widgets are passed as

parameters to other widgets:
AppBar, Center and
FloatingActionButton passed
to Scaffold.
 20

Flutter UI: Handling gestures

• Most applications include some form of user interaction with the system. The
first step in building an interactive application is to detect input gestures.
• The GestureDetector widget doesn’t have a visual representation but instead
detects gestures made by the user.
• In the following example: when the user taps the Container,
the GestureDetector calls its onTap() callback, in this case printing a
message to the console.
 21

Flutter UI: Handling gestures- Example

 22

Flutter UI: Changing widgets in response to input

• Members variables of StatelessWidget are final so they couldn’t be changed.

• Re-rendering widget upon user interaction to consider new state (new values to be
considered in the rendering) we should maintain a state for the widget => extend
StatefulWidget.
• STEPS:
• Step1: Create a class extending StatefulWidget and overriding createState which returns an
object of type State<StatefulWidget>
• Step2: Create a second class extending State<StatefulWidget> (instantiated and returned in
createState)
• Step3: Implement a method calling the setState(callback). The callback should update the values
of the variables members to change.
• Step4: Override the build method. It should define the event that will call the method of the
previous point which will call setState and then get the build method called again for re-rendering.
 23

Step1

Step2

Step4
 24

Flutter UI: Example of changing

widgets in response to input
Step2

Step3
Step1

Step4
Summary
System Overview
Summary
Features
 27

Resources

• https://dart.dev/guides/language/language-tour

• https://flutterbyexample.com

• https://flutter.dev/docs/development/ui/widgets-intro

• https://api.flutter.dev/flutter/widgets/Container-class.html
 28

Enjoy Developing!
Wish you all the BEST ...