Development

UNIT 03

Application
Mobile
INTRODUCTION
TO
WIDGETS
 What are Flutter Widgets?

 A flutter mobile app consists of multiple UIs with each UI built out of
one or more widgets.
 These widgets are nothing but elements of interaction between the app
user and the application.
WIDGETS  Note: element of interaction used to describe widget.
 A graphical widget (also graphical control element or control) in a
graphical user interface is an element of interaction such as a button or a
scroll bar.
 Controls are software components that a computer user interacts with
through direct manipulation to read or edit information about an
application.
WIDGETS
 VISUAL
REPRESENTATION
OF THE
WIDGET TREE
 1. Visible (Output and Input)
2. Invisible (Layout and Control)

1. Visible widget:
TYPES  The visible widgets are related to the user input and
OF output data.
 Some of the important types of this widget are:
WIDGETS 1. Text
2. Button
3. Image
4. Icon
 1. Visible (Output and Input)
2. Invisible (Layout and Control)
2. Invisible widget

TYPES  The invisible widgets are related to the layout and control of
widgets.

OF  It provides controlling how the widgets actually behave and

how they will look onto the screen.
WIDGETS  Some of the important types of these widgets are:
1. Column
2. Row
3. Center
4. Padding
5. Scaffold
6. Stack
 1. Visible widget:
 Text
TYPES  Text widget is used to display a piece of string.
 The style of the string can be set by using style property and TextStyle
OF class.

WIDGETS  The sample code for this purpose is as follows −

 Text('Hello World!', style: TextStyle(fontWeight:FontWeight.bold))
 1. Visible widget:
 Text
import 'package:flutter/material.dart';

TYPES void main() {

runApp(MyApp());
}

OF class MyApp extends StatelessWidget {

Widget build(BuildContext context) {

WIDGETS return Center( child: Text( 'Hello,World!',

textDirection:TextDirection.ltr,

style:TextStyle(fontWeight:FontWeight.bold,

color:Colors.white,fontSize:20.0,)) );
}
 1. Visible widget:
 Button
 Buttons are the graphical control element that provides a user to trigger
an event such as taking actions, making choices, searching things, and
TYPES many more.

OF
 They can be placed anywhere in our UI like dialogs, forms, cards,
toolbars, etc.

WIDGETS  Flutter provides several types of buttons that have different shapes,
styles, and features.
 We can easily apply themes on buttons, shapes, color, animation, and
behavior.
 1. Visible widget:
 Button
 Types of Flutter Buttons
 Flat Button
TYPES  Raised Button

OF
 Floating Button
 Drop Down Button

WIDGETS  Icon Button

 Inkwell Button
 PopupMenu Button
 1. Visible widget:
 Button
 Flat Button: It is a text label button that

TYPES does not have much decoration and

displayed without any elevation.

OF  we can use color to the button and text

using color and textColor attributes,

WIDGETS Code:
child: FlatButton(

child: Text('LogIn', style: TextStyle(fontSize:

20.0),),
color: Colors.blueAccent,
textColor: Colors.white,
onPressed: () {},
),
 1. Visible widget:
 Button
 Raised Button: It is a button, which is

TYPES based on the material widget and has

a rectangular body.

OF  It is similar to a flat button, but it has an

elevation that will increases when the

WIDGETS button is pressed.

 It has several properties like text color,
shape, padding, button color, animation
time, elevation, etc.
 1. Visible widget:
 Button
 Floating Button: A FAB button is

TYPES a circular icon button that triggers the

primary action in our application.

OF  It is the most used button in today's

applications.

WIDGETS  We can use this button for adding,

refreshing, or sharing the content.
 Flutter suggests using at most one FAB
button per screen.
 1. Visible widget:
 Button
 Drop Down Button: A drop-down
button is used to create a nice overlay

TYPES on the screen.

 That allows the user to select any item

OF from multiple options.

 Flutter allows a simple way to

WIDGETS implement a drop-down box or drop-
down button.

 This button shows the currently

selected item
 1. Visible widget:
 Button
 Icon Button: An Icon Button is
a picture printed on the Material

TYPES widget.

 It is a useful widget that gives the

OF Flutter UI a material design feel.

 We can also customize the look and

WIDGETS feel of this button.

 In simple terms, it is an icon that reacts

when the user will touch it.
 1. Visible widget:
 Button
 Inkwell Button: InkWell button is a
material design concept, which is used

TYPES for touch response.

 This widget comes under the Material

OF widget where the ink reactions are

actually painted.

WIDGETS  It creates the app UI interactive by

adding gesture feedback.

 It is mainly used for adding call ripple

effect.
 1. Visible widget:
 Button
 Popup Menu Button: It
is a button that displays

TYPES the menu when it is

pressed.

OF  This button contains a

text and an image.

WIDGETS  It will mainly use

with Settings menu to list
all options.
 1. Visible widget:
 Image
 Image widget is used to display an image in the application.
 Image widget provides different constructors to load images from
TYPES multiple sources and they are as follows −

OF
 Image − Generic image loader using ImageProvider
 Image.asset − Load image from flutter project’s assets

WIDGETS  Image.file − Load image from system folder

 Image.memory − Load image from memory
 Image.Network − Load image from network
 1. Visible widget:
 Image
 The most important properties of the Image widget are as follows
 image, ImageProvider − Actual image to load
TYPES  width, double − Width of the image

OF
 height, double − Height of the image
 alignment, AlignmentGeometry − How to align the image within its

WIDGETS bounds
 1. Visible widget:
 Image
 The most important properties of the Image widget are as follows
 image, ImageProvider − Actual image to load
TYPES  width, double − Width of the image

OF
 height, double − Height of the image
 alignment, AlignmentGeometry − How to align the image within its

WIDGETS bounds
 1. Visible widget:
 Image
 Image.asset('assets/tablet.png'
height: 400,

TYPES width: 250 ),

OF  Image.file(‘Newfolder/tablet.png'),
 Image.memory(‘Pendrive/tablet.png'),

WIDGETS  Image.network(‘link/tablet.png'),
 1. Visible widget:
 Icon
 An icon is a graphic image representing an application or any specific
entity containing meaning for the user.

 Flutter provides an Icon Widget to create icons in our applications. We

TYPES can create icons in Flutter, either using inbuilt icons or with the custom
icons.

OF  Icon Widget Properties

WIDGETS
 1. Visible widget:
 Icon

TYPES EX: Email Icon:

color: default, size: default, semanticLabel: None', textdirection:

OF default,
bottom: TabBar(
tabs: [

WIDGETS Icon(Icons.camera)),
Tab(icon:

],
),
body: TabBarView(
children: [
Icon(Icons.camera,
color: Colors.black,
size: 70,
semanticLabel: ‘Camera',
 Invisible (Layout and Control)
2. Invisible widget
 The invisible widgets are related to the layout and control of

TYPES widgets.
 It provides controlling how the widgets actually behave and

OF how they will look onto the screen.

 Some of the important types of these widgets are:
WIDGETS 1.
2.
Column - Arrange its children in the vertical direction.
Row - Arrange its children in the horizontal direction.
3. Center - Arrange its children in the middle direction.
4. Padding - Used to set the distance between the border of the container
5. Stack - Arrange one above the another.
 Invisible widget
1. Column:
 This widget arranges its children in a vertical direction on the screen.
 We can also control how a column widget aligns its children using the

TYPES
property mainAxisAlignment and crossAxisAlignment.
 The column's cross-axis will run horizontally, and the main axis will run

OF vertically. The below visual representation explains it more clearly.

WIDGETS
 Invisible widget
2. Row:
 This widget arranges its children in a horizontal direction on the screen.
 We can control how a row widget aligns its children based on our choice

TYPES
using the property crossAxisAlignment and mainAxisAlignment.
 The row's cross-axis will run vertically, and the main-axis will run

OF horizontally. See the below visual representation to understand it more

clearly.

WIDGETS
 Invisible widget

TYPES
OF
WIDGETS
 Invisible widget
3. Center:
 Center widget comes built-in with flutter, it
aligns its child widget to the center of the

TYPES
available space on the screen.
 The size of this widget will be as big as

OF possible if the widthFactor and heightFactor

properties are set to null.

WIDGETS  alignment: This

in AlignmentGeometry as
property
the
takes
parameter
value to determine how the child widget will
be aligned with respect to the Center widget.
 Invisible widget
4. Padding:
 Padding widget in flutter does exactly
what its name says, it adds padding or

TYPES empty space around a widget or a

bunch of widgets.
OF  We can apply padding around any

WIDGETS
widget by placing it as the child of
the Padding widget.
 The Padding widget adds empty space
around any widget by using the
abstract EdgeInsetsGeometry class.
 Invisible widget
5. Stack :
 Stack widget is a built-in widget in
flutter SDK which allows us to make a
TYPES layer of widgets by putting them on
top of each other.
OF  We might want to show some text over

WIDGETS an image, so to tackle such a situation

we have Stack widget.
 Introduction to Layouts
 The core concept of Flutter is widget,
Flutter a user interface layout
functionality into the widgets itself.
 Flutter provides quite a lot of specially
designed widgets like Container, Center,
INTRODUCTION Align, etc., only for the purpose of
TO laying out the user interface.
LAYOUTS  For example, we can see the image that
shows three icons with a label under
each one
 In the second image, we can see the
visual layout of the above image. This
image shows a row of three columns,
and these columns contain an icon and
 Types of Layouts.
 Layout widgets can be grouped into two category based on its child Widget
1.Widget supporting a single child 2. Widget supporting multiple
child

TYPES 

Widget supporting a single child:
The single child layout widget is a type of widget, which can have only
OF one child widget inside the parent layout widget.

LAYOUTS  These widgets can also contain special layout functionality. Flutter
provides us many single child widgets to make the app UI attractive.
 The list of different types of single child widgets are:
 For example, Centre widget just centres it child widget with respect to its
parent widget. And child at any given place inside it using different option
like padding, decoration, etc.
 Single child widgets are great options to create high quality widget having
 2. Widget supporting multiple child:
 In this category, a given widget will have more than one child widgets and
the layout of each widget is unique.
 For example, Row widget allows the laying out of its children in horizontal

TYPES direction, whereas Column widget allows laying out of its children in
vertical direction. By composing Row and Column, widget with any level

OF
of complexity can be built.
 Let us learn some of the frequently used widgets in this section.

LAYOUTS 

Row − Allows to arrange its children in a horizontal manner.
Column − Allows to arrange its children in a vertical manner.
 ListView − Allows to arrange its children as list.
 GridView − Allows to arrange its children as gallery.
 MaterialApp:
 MaterialApp is a container for your entire Flutter app.
 It sets up the app’s main structure and provides essential features and
services.
 Think of it as the foundation upon which you build your app’s UI and
METERIAL 
functionality.
The MaterialApp widget provides a wrapper around other Material Widgets.
 We can access all the other components and widgets provided by Flutter SDK.

APP
Text wedget,
DropdownButton widget,
AppBar widget,
Scaffold widget,
ListView widget,
IconButton widget,
TextField widget,
Padding widget,
ThemeData widget, etc.
 These all widgets that can be accessed using MaterialApp class.
 Scaffold:
 Scaffold is a class in flutter which provides many widgets or we can say
APIs like Drawer, Snack-Bar, Bottom-Navigation-Bar, Floating-Action-
Button, App-Bar, etc.
 Scaffold will provide a framework to implement the basic material design
layout of the application.

SCAFFOLD
Properties of Scaffold Class:
 App-Bar: It displays a horizontal bar which mainly placed at the top of the
Scaffold.
 AppBar uses the widget AppBar which has its own properties like title,
brightness,
 Flutter Container:
 The container in Flutter is a parent widget that can contain
multiple child widgets and manage them efficiently through
width, height, padding, background color, etc.
 It is a widget that combines common painting, positioning,
FLUTTER and sizing of the child widgets.
 Generally, it is similar to a box for storing contents. It allows
CONTAINER many attributes to the user for decorating its child widgets,
such as using margin, which separates the container with other
contents
 A container widget is same as tag in html.
 It will wrap the child widget according to the specified height
& width.
 A basic container has a margin, border, and padding properties
surrounding its child widget, as shown in the below image:
 Flutter Container:

FLUTTER
CONTAINER
THANK YOU END OF UNIT