Mobile Programming

Chapter 2
Stateless Widgets
Topics
Create a Simple Flutter Application
structure of the application
Flutter Architecture
Scaffold Widget
Widget tree diagram
Image Widget
State Management Widget
Understanding Flutter hot reload and hot restart
SafeArea
Layout widgets
Create a Simple Flutter Application
create a simple Flutter application
to understand the basics of
creating a flutter application in the
Android Studio.
Step 1: Open Android Studio
Step 2: Create Flutter Project. For
this, click File -> New -> New
Flutter Project
Step
Step 3: Select Flutter Application. For this, select Flutter Application
and click Next
Step
structure of the application
Flutter Architecture

The Flutter architecture mainly comprises of four

components.
1.Flutter Engine
2.Foundation Library
3.Widgets
4.Design Specific Widgets
Flutter Engine

• It is a portable runtime for high-quality mobile apps and

primarily based on the C++ language. It implements
Flutter core libraries that include animation and
graphics, file and network I/O, plugin architecture,
accessibility support, and a dart runtime for developing,
compiling, and running Flutter applications
Foundation Library

It contains all the required packages for the basic

building blocks of writing a Flutter application. These
libraries are written in Dart language
 Widgets
• The core concept of the Flutter framework. 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
Design Specific Widgets

The Flutter framework has two sets of widgets that

conform to specific design languages. These are
Material Design for Android application and Cupertino
Style for IOS application.
The most common widgets
• Layout—Row, Column, Scaffold, Stack
• Structures—Button, Toast, MenuDrawer
• Styles—TextStyle, Color
• Animations—FadeInPhoto, transformations
• Positioning and alignment—Center, Padding
Examples
 Explanation of code
• Import statement: The import statement is used to import the
libraries that are provided by the flutter SDK. Here we have
imported the ‘material.dart’ file. We can use all the flutter widgets
that implements material design by importing this file.
• main() function: Like many other programming languages, we
also have main function in which we have to write the statements
those are to be executed when the app starts. The return type of
main function is ‘void’.
• runApp(Widget widget) function: The void runApp(Widget
widget) takes a widget as an argument and set it in a screen. It
gives the constraints to the widget to fit into the screen
 Explanation of code
• MaterialApp Class: MaterialApp is a predefined class in a
flutter. It is likely the main or core component of flutter. We
can access all the other components and widgets provided
by Flutter SDK
• home: It is used for the default route of the app means the
widget defined in it is displayed when the application starts
normally.
• Center widget aligns its child to the center. The size of this
widget will be as big as possible
• Text Widget to display title in application bar and a message
in the body of an application.
Output
Scaffold Widget
• A Scaffold Widget provides a framework which implements the basic
material design visual layout structure of the flutter app .The following
constructor parameters of the widget Scaffold.
1.appBar(It displays a horizontal bar which mainly placed at the
top of the Scaffold.)
2.Body (body: It will display the main or primary content in the
Scaffold. It is below the appBar )
3.Floating Action Button
4.Bottom Navigation Bar
5.More
Flutter Examples
backgroundColor
Widget tree diagram
TextStyle/ TextAlign
Properties
• fontSize
• Color
• fontFamily
• fontWeight
• fontStyle
Image Widget
1.Image.asset - To display image from assets bundle
2.Image.file - To display image from a file
3.Image.memory - To display image from Uint8List
4.Image.network - To display image from a URL
AssetImage 

The pubspec.yaml is an important file that is used to create a directory or one point of reference to the entire
Flutter project.
Image.network 
State Management Widget

• In Flutter, there are mainly two types of widget:

• StatelessWidget
• StatefulWidget
The StatelessWidget does not have any state
information. It remains static throughout its lifecycle.
The examples of the StatelessWidget are Text, Row,
Column, Container, etc.
Understanding Flutter hot reload and hot restart

• reload the code on a running

app. After the code files run into
Virtual
Machine, Flutter automatically
reflects the updated widgets on
app screen and allows you to
view the changes
• Hot restart loads code changes
into the VM, and restarts the
Flutter app, losing the app state
 SafeArea
SafeArea is basically a glorified
Padding widget. If you wrap
another widget with SafeArea, it
adds any necessary padding
needed to keep your widget
from being blocked by the
system status bar, notches,
holes, rounded corners, and
other "creative" features by
manufactures.
Examples

SafeArea(
child: Text('My
Widget: ...’),
),
Layout widgets

Arrange other widgets columns, rows, grids, and many other

layouts.
•Single-child layout widgets
•Multi-child layout widgets
Single-child layout widgets

• Center
•  Container  
• Align 
• AspectRatio
• Expanded 
• FittedBox 
• Padding 
• SizedBox 
Container widgets
The Container widget is used to contain a child widget with the ability
to apply some styling properties
Container: Generic, single child, box based container widget with alignment,
padding, border and margin along with rich styling features.
Container properties
•Padding/ Margin
•Height/ width
•Color
•Alignment
Container widgets
Decoration
The shape of the border to draw around the decoration's container
Border.all(width 1, color Colors.green)
Border(top: BorderSide(color: Colors.red, width: 10 )
Border(right:BorderSide(color: Colors.red,width: 3))
border:Border(left:BorderSide(color: Colors.red,width: 3))
border:Border(bottom:BorderSide(color: Colors.red,width: 3))
Margin

Margin : A margin is a property specifying to add space to surround

the container.we do it with EdgeInsets.
•margin:EdgeInsets.all(double value)
•margin: EdgeInsets.symmetric({ double vertical = 0.0,
•double horizontal = 0.0 })
•margin:EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom)
•margin: EdgeInsets.only({this.left = 0.0, this.top = 0.0, this.right = 0.0, this.bottom =
0.0 })
•
Padding
• padding property allows to define the size of the spacings and child to
define the widget
• padding:EdgeInsets.all(double value)
• padding: EdgeInsets.symmetric({ double vertical = 0.0,
• double horizontal = 0.0 })
• padding:EdgeInsets.fromLTRB(this.left, this.top, this.right,
this.bottom)
• padding: EdgeInsets.only({this.left = 0.0, this.top = 0.0, this.right = 0.0,
this.bottom = 0.0 })
Height/ width/Color

The red Container wants to be 100 × 100, but it can’t, because the screen

forces it to be exactly the same size of the screen.
 Align
A widget that aligns its child within itself and optionally sizes itself based on the child's size.

For example, to align a box at the bottom right, you would pass this box a tight constraint
that is bigger than the child's natural size, with an alignment of Alignment.bottomRight.
AspectRatio
A widget that attempts to size the child to a specific aspect ratio.
Container(
color: Colors.green,
child: AspectRatio(
aspectRatio: 4/2,
)
FittedBox
FittedBox Widget is a simple Widget to help in creating a quick
and neater way to contain a child inside a parent. The main
purpose of using the FittedBox is to make the App UI look neater
for dynamic children with varying length
fit: This property is of type BoxFit. It is used to describe how a
box is inscribed in another box. It caters to sizing semantics.
Now, we’ll see it’s properties:
FittedBox
• contain: Using this property, we contain the source entirely in the target
box, no matter how large it may be.
• cover: It makes the source as small as possible, while still covering the
entire target box.
• fill:  It fills the entire target box, impacting the source’s aspect ratio.
• fitHeight: It ensures that the full height of the source is shown, even if it
overflows the target box horizontally.
• fitWidth: It ensures that the full width of the source is shown, even if it
overflows the target box vertically.
• none: It aligns the source inside the target box and remove any extra
portions from the source, if any, as it doesn’t resize the image.
Multi-child layout widgets

• Column
• Row 
• ListView 
• GridView
• Stack 
Column
• Layout a list of child widgets in the vertical direction
mainAxisSize / verticalDirection
Determines the order to lay children out vertically and how to interpret
start and end in the vertical direction.
verticalDirection: VerticalDirection.down,
MainAxisSize 
The size that should be allocated to the widget on the main axis
mainAxisSize: MainAxisSize.max,
Alignment Properties

mainAxisAlignment and crossAxisAlignment. In column, children

are aligned from top to bottom. Main Axis is vertical and Cross
Axis is horizontal. MainAxisAlignment aligns its children vertically
and CrossAxisAlignment aligns horizontally in that Column.
Row
• Layout a list of child widgets in the horizontal direction
Alignment Properties

• mainAxisAlignment and crossAxisAlignment.  Row’s mainAxis is

horizontal and cross Axis to a Row’s main Axis is vertical. We can align
children horizontally using MainAxisAlignment and vertically using
CrossAxisAlignment in that row.
Expanded
• Expanded works with Flex\Flexbox layout and is great for distributing
space between multiple items.
SizedBox
widget is defined as a box with a specified size. Unlike Container,
you cannot set color or decoration using SizedBox. The widget is
only used for sizing the widget passed as a child.
The End