Mobile Programming

Chapter 2
Basic flutter widgets
Topics
Create a Simple Flutter Application
Run a Simple Flutter Application
Structure of the application
Flutter Architecture
Most Common Widgets
 Understanding Flutter hot reload and hot restart
 Stateful and Stateless Widget
 Use a custom Font
 Create a Restaurant Menu
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: click on New Flutter Project from the
welcome screen or click on New and then
New Flutter Project from the File menu.
Android Studio will open the New Project
dialog.
Next
• Android Studio then prompts you
for the path to your Flutter SDK
directory.
• Verify the path is correct and then
hit the Next button.
Next
• The next step is to enter your
project name.
• In the New Project box, enter the
project name. No other changes
are required. Click on Create.
Next
• Android Studio creates the project
and prompts the user to open it.
Running Flutter Application
• Open your Flutter project in Android Studio.

• Select the target device (the running emulator) from the

device dropdown in the toolbar.

• Click the green Run button (or use the shortcut Shift +
F10).
Running Flutter
Application
• Android Studio will build the app and install it on
the emulator. Once completed, the app will
launch on the emulator screen.

• We just ran our first Flutter App!

Running Flutter Application
• You can hit the stop button in Android Studio to stop the
app from running.
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 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
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
• Text and Styling Widgets
• Tex, RichText, TextStyle, Color, Theme
• Image and Media Widgets
• Image, Icon
• Structure and Layout
• Row, Column, Scaffold, SafeArea, Container, Expended, SizedBox, Padding, Center,
Align, Card
• Button Widgets
• Elevated Button, Text Button, OutLined Button, IconButton, FloutingActionButton
General Example
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
Text and Styling Widgets
• Text Widget:
• Text:
• Displays simple text.
• RichText:
• Displays text with multiple styles.

• Text Styling:
• TextStyle:
• Customize font size, weight, color, and style.
• Color:
• Change text color.
• Theme:
• Apply consistent styling across the app.

• Alignment:
• TextAlign:
• Align text (left, right, center).
• TextDirection:
• Set text direction (LTR or RTL).
Example – Text Widget
Example – Rich Text Widget
RichText(
text: TextSpan(
text: 'Hello ',
style: DefaultTextStyle.of(context).style,
children: const <TextSpan>[
TextSpan(text: 'bold', style: TextStyle(fontWeight:
FontWeight.bold)),
TextSpan(text: ' world!'),
],
),
)
 Structure and Layout
• Basic Layout Widgets:
• Scaffold: Provides a basic layout structure for the app, including app bars, drawers, bottom navigation, and floating action
buttons.
• Row: Arranges children in a horizontal line.
• Column: Arranges children in a vertical line.
• Container: A box model widget for styling, padding, and positioning.
• Card: is used to create a material design card.

• Spacing and Alignment:

• SizedBox: Adds fixed space between widgets.
• Padding: Adds space around a widget.
• Center: Centers a child widget within its parent.
• Align: Aligns a child within its parent based on alignment settings.

• Complex Layouts:
• Stack: Overlays children on top of each other.
• Expanded: Expands a child to fill available space in a Row or Column.

• Safe Area:
• SafeArea: Ensures widgets are not obscured by system UI elements (like notches and status bars).
Example - 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
Scaffold Widget
Example - Container
Example – Row Widget
Example – Column Widget
Example – Align Widget
Example – Stack Widget
Example – Card Widget
Image and Media Widgets
• Displaying Images:
• Image: Displays images from assets, network, or memory.
• Icon: Displays material design icons.

• Handling Media:
• VideoPlayer: Used for playing video content.
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
Displaying an Image From Assets
Add the image file to your project's assets folder.
Declare the asset in the pubspec.yaml file.
• flutter:
assets:
- assets/images/sample.png

To include all assets under a directory, specify the directory

name with the / character at the end:
• flutter:
assets:
- directory/
- directory/subdirectory/
Displaying an Image From Assets
Displaying an Image From Network
Example – Icon Widget
Margin property
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 property
• 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 })
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 crossAxisAlign

ment. 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.
Alignment Properties

• mainAxisAlignment and crossAxisAlignm

ent. 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.
 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.
A StatefulWidget is a widget that can change over time in
response to user actions, network data, or any other event
that triggers a state change.
Understanding Flutter hot reload and
hot restart
Understanding Flutter hot reload and
hot restart
Custom Font
• Flutter works with custom fonts and you can apply a
custom font across an entire app or to individual
widgets. This recipe creates an app that uses custom
fonts with the following steps:
• Import the font files.
• Declare the font in the pubspec.
Import the font files / Declare the
font in the pubspec
• To work with a font, import the font files into the project. It’s common practice to
put font files in a fonts or assets folder at the root of a Flutter project.
• Once you’ve identified a font, tell Flutter where to find it. You can do this by
including a font definition in the pubspec.yaml file.
Button Widgets
• Button Types:
• ElevatedButton: A material button with a shadow, used for primary actions.
• TextButton: A flat button without elevation, ideal for secondary actions.
• OutlinedButton: A button with a border, used for less prominent actions.
• IconButton: A button that displays an icon, used for actions like sharing or
editing.
• FloatingActionButton: A circular button for a primary action, typically used in a
prominent location.
• Key Properties:
• onPressed: Defines the action to take when the button is tapped.
• child: Defines the content of the button (text, icon, etc.).
Example - ElevatedButton
Example - OutLinedButton
Example – Icon Button, Floating
Action Button
Dart Programming - Variables
A variable is “a named space in the memory” that stores
values. In other words, it acts a container for values in a
program. Variable names are called identifiers.
Following are the naming rules for an identifier −
Identifiers cannot be keywords.
Identifiers can contain alphabets and numbers.
Identifiers cannot contain spaces and special
characters, except the underscore (_) and the dollar ($)
sign.
Variable names cannot begin with a number.
Declaring variable in Dart
variable Assignment in Dart
 The Dynamic keyword
Variables declared without a static type are implicitly declared as dynamic.
Variables can be also declared using the dynamic keyword in place of the var
keyword
 Final and Const
The final and const keyword are used to declare constants. Dart
prevents modifying the values of a variable declared using the
final or const keyword. These keywords can be used in
conjunction with the variable’s data type or instead of
the var keyword
The const keyword is used to represent a compile-time constant.
Variables declared using the const keyword are implicitly final
 Functions
Functions are the building blocks of readable,
maintainable, and reusable code. A function is a
set of statements to perform a specific task.
Functions organize the program into logical blocks
of code
Once defined, functions may be called to access code. This makes the code reusable.
Moreover, functions make it easy to read and maintain the program’s code.
Defining a Function
A function definition specifies what and how a specific task would
be done
Calling a Function
returning functions
Dart – Anonymous Functions
Creating a Restaurant Menu
The End