Unit 3 Mad - 1

BHAGWAN MAHAVIR UNIVERSITY
BHAGWAN MAHAVIR POLYTECHNIC
Mobile App Development –

Theory (1030106601)
READING
MATERAIL
6TH SEMESTER
SUMMER-2024
IT DEPARTMENT
READING MATERIAL
Mobile App Development – Theory (1030106601)
Chapter 3: Working with widgets
Que:1: What is Flutter Widgets?

Each element on a screen of the Flutter app is a widget. The view of the screen completely
depends upon the choice and sequence of the widgets used to build the apps. And the
structure of the code of an apps is a tree of widgets.
Fig – Widget
Mobile App Development – Theory (1030106601) Page 1 of 28

IT DEPARTMENT
READING MATERIAL
In Flutter, widgets can be grouped into multiple categories based on their features, as listed
below −
• Platform specific widgets

• Layout widgets
• State maintenance widgets
• Platform independent / basic widgets
Platform specific widgets

Flutter has widgets specific to a particular platform - Android or iOS.
Some of the most used material widgets are as follows −
• Scaffold
• AppBar
• BottomNavigationBar
• TabBar
• TabBarView
• ListTile
• FloatingActionButton
• FlatButton
• IconButton
• TextField
• Checkbox
• Radio
• Slider
• Date & Time Pickers
• SimpleDialog
• AlertDialog
Layout widgets
To compose multiple widgets into a single widget, Flutter provides large number of widgets
with layout feature.
Some of the popular layout widgets are as follows −
• Container − A rectangular box decorated using BoxDecoration widgets with
background, border and shadow.
• Center − Center its child widget.

IT DEPARTMENT
READING MATERIAL
• Row − Arrange its children in the horizontal direction.

• Column − Arrange its children in the vertical direction.
• Stack − Arrange one above the another.
State maintenance widgets

In Flutter, all widgets are either derived from StatelessWidget or StatefulWidget.
Widget derived from StatelessWidget does not have any state information but it may contain
widget derived from StatefulWidget.
Platform independent / basic widgets
Flutter provides large number of basic widgets to create simple as well as complex user
interface in a platform independent manner.
• Text
• Image
• Icon
Que:2: What is Visible and Invisible widgets in Flutter?

It is a types of widgets. We can split the Flutter widget into two categories:
1. Visible (Output and Input)

2. Invisible (Layout and Control)
Visible widget
The visible widgets are related to the user input and output data. Some of the important types
of this widget are:
• Text
• Button
• Image
• Icon
Invisible widget
The invisible widgets are related to the layout and control of widgets. It provides controlling
how the widgets actually behave and how they will look onto the screen. Some of the important
types of these widgets are:
• Column
• Row

IT DEPARTMENT
READING MATERIAL
• Center
• Padding
• Scaffold
• Stack
Que:3: What is state management widget in Flutter?

In Flutter, there are mainly two types of widget:
o StatelessWidget
o StatefulWidget
StatefulWidget
A StatefulWidget has state information. It contains mainly two classes: the state object and
the widget. It is dynamic because it can change the inner data during the widget lifetime. This
widget does not have a build() method. It has createState() method, which returns a class that
extends the Flutters State Class. The examples of the StatefulWidget are Checkbox, Radio,
Slider, InkWell, Form, and TextField.
Example:
class Car extends StatefulWidget {

_CarState createState() => _CarState();
}
class _CarState extends State<Car> {
@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xFEEFE),
child: Container(
child: Container( //child: Container() )
)
);
}
}

IT DEPARTMENT
READING MATERIAL
The Stateless Widget does not have any state information. It remains static throughout its
lifecycle. The examples of the Stateless Widget are Text, Row, Column, Container, etc.
Example
class MyStatelessCarWidget extends StatelessWidget {

@override
return Container(color: const Color(0x0xFEEFE));
}
}
Que:4: Explain MaterialApp widget with example.

MaterialApp is a predefined class or widget in a flutter. It is likely the main or core
component of a flutter app. The MaterialApp widget provides a wrapper around other
Material Widgets. We can access all the other components and widgets provided by Flutter
SDK. Text widget, DropdownButton widget, AppBar widget, Scaffold widget,
ListView widget, StatelessWidget, StatefulWidget, IconButton widget, TextField widget,
Padding widget, ThemeData widget, etc. are the widgets that can be accessed using
MaterialApp class. There are many more widgets that are accessed using MaterialApp class.
Using this widget, we can make an attractive app that follows the Material Design guidelines.
Properties of MaterialApp widget:
Property Descriptions
color It controls the primary color used in the application.
darkTheme It provided theme data for the dark theme for the
application.
debugShowCheckedModeBanner This property takes in a boolean as the object to decide

whether to show the debug banner or not.
home This property takes in widget as the object to show on

the default route of the app.

IT DEPARTMENT
READING MATERIAL
theme This property takes in ThemeData class as the object to

describe the theme for the MaterialApp.
themeMode This property holds ThemeMode enum as the object to

decide the theme for the material app.
title The title property takes in a string as the object to

decide the one-line description of the app for the device.
Example of MaterialApp widget:
import 'package:flutter/material.dart';
void main() {
runApp(const GFGapp());
}
class GFGapp extends StatelessWidget {

const GFGapp({Key? key}) : super(key: key);
@override
return MaterialApp(
title: 'Hello',
theme: ThemeData(primarySwatch: Colors.green),
darkTheme: ThemeData(primarySwatch: Colors.grey),
color: Colors.amberAccent,
supportedLocales: {const Locale('en', ' ')},
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('Helloworld')),
),
);
}
}

IT DEPARTMENT
READING MATERIAL
Que:5: Explain Scaffold widget with example.
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
expand or occupy the whole device screen. It will occupy the available space. Scaffold will
provide a framework to implement the basic material design layout of the application.
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 elevation, title, brightness, etc.
body It will display the main or primary content in the Scaffold. It is

below the appBar and under the floatingActionButton. The widgets
inside the body are at the left-corner by default.
backgroundColor used to set the color of the whole Scaffold widget.
FloatingActionButton is a button that is placed at the right bottom

corner by default. FloatingActionButton is an icon button that floats
floatingActionButton over the content of the screen at a fixed place. If we scroll the page
its position won’t change, it will be fixed.
drawer is a slider menu or a panel which is displayed at the side of

the Scaffold. The user has to swipe left to right or right to left
according to the action defined to access the drawer menu. In the
drawer Appbar, an appropriate icon for the drawer is set automatically at a
particular position. The gesture to open the drawer is also set
automatically. It is handled by the Scaffold.
bottomNavigationBar is like a menu at the bottom of the Scaffold.

bottomBavigationBar We have seen this navigationbar in most of the applications. We can
add multiple icons or texts or both in the bar as items.

IT DEPARTMENT
READING MATERIAL
Example of Scaffold widget:
Widget build(BuildContext context)

{
return Scaffold(
appBar: AppBar(
title: const Text('Hello'),
),
}
Example of Appbar property:

return Scaffold(
appBar: AppBar(title: const Text('Hello')),
body: const Center(
child: Text(
"Welcome to Flutter!!!",
style: TextStyle(
color: Colors.black,
fontSize: 40.0,
),
),
),
);
}
Example of floatingActionButton

return Scaffold(
appBar: AppBar(title: const Text('GeeksforGeeks')),
body: const Center(
child: Text(
"Welcome to GeeksforGeeks!!!",
style: TextStyle(
color: Colors.black,
fontSize: 40.0,
),
),
),
floatingActionButton: FloatingActionButton(
elevation: 10.0,
child: const Icon(Icons.add),

IT DEPARTMENT
READING MATERIAL
onPressed: () {
// action on button press
},
),
);
}
Example of drawer
drawer: Drawer(
child: ListView(
children: const <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.green,
),
child: Text(
'Drawer Example',
style: TextStyle(
fontSize: 24,
),
),
),
ListTile(
title: Text('Item 1'),
),
ListTile(
title: Text('Item 2'),
),
],
),
),
Example of bottomNavigationBar:
bottomNavigationBar: BottomNavigationBar(
currentIndex: 0,
fixedColor: Colors.green,
items: const [
BottomNavigationBarItem(
label: "Home",
icon: Icon(Icons.home),
),

IT DEPARTMENT
READING MATERIAL
label: "Search",
icon: Icon(Icons.search),
),
label: "Profile",
icon: Icon(Icons.account_circle),
),
],
onTap: (int indexOfItem) {}),
Que:6: Explain Appbar widget with example.

AppBar is usually the topmost component of the app (or sometimes the bottom-most), it
contains the toolbar and some other common action buttons. As all the components in a flutter
application are a widget or a combination of widgets. So AppBar is also a built-in class or
widget in flutter which gives the functionality of the AppBar out of the box.
The AppBar widget is based on Material Design and much of the information is already
provided by other classes like MediaQuery, Scaffold as to where the content of the AppBar
should be placed. Though the AppBar class is very flexible and can be easily customized, we
can also use the SliverAppBar widget which gives scrollable functionality to the app bar. Or
we can create our own custom app bar from scratch.
Properties of Appbar Widget:
actions This property takes in a list of widgets as a parameter to be displayed

after the title if the AppBar is a row.
title This property usually takes in the main widget as a parameter to be

displayed in the AppBar.
backgroundColor This property is used to add colors to the background of the Appbar.
elevation This property is used to set the z-coordinate at which to place this app
bar relative to its parent.
shape This property is used to give shape to the Appbar and manage its
shadow.

IT DEPARTMENT
READING MATERIAL
Example:
{
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Hello'),
), //AppBar
body: const Center(
child: Text(
'Hello World',
style: TextStyle(fontSize: 24),
), //Text
), // center
), //Scaffold
debugShowCheckedModeBanner: false, //Removing Debug Banner
);
}
Que:7: Explain Image widget with example.

A flutter app when built has both assets (resources) and code. Assets are available and
deployed during runtime. The asset is a file that can include static data, configuration files,
icons, and images. The Flutter app supports many image formats, such as JPEG, WebP, PNG,
GIF, animated WebP/GIF, BMP, and WBMP.
Displaying images is the fundamental concept of most of the mobile apps. Flutter has an Image
widget that allows displaying different types of images in the mobile application.
Example of Image widget:
How to display the image in Flutter
To display an image in Flutter, do the following steps:
Step 1: First, we need to create a new folder inside the root of the Flutter project and named it
assets. We can also give it any other name if you want.
Step 2: Next, inside this folder, add one image manually.
Step 3: Update the pubspec.yaml file. Suppose the image name is tablet.png, then
pubspec.yaml file is:
assets:
- assets/tablet.png
- assets/background.png

IT DEPARTMENT
READING MATERIAL
If the assets folder contains more than one image, we can include it by specifying the directory
name with the slash (/) character at the end.
flutter:
assets:
- assets/
Step 4: Finally, open themain.dart file and insert the following code.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {

@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Image Demo'),
),
body: Center(
child: Column(
children: <Widget>[
Image.asset('assets/tablet.png'),
Text(
'A tablet is a wireless touch screen computer that is smaller than a notebo
ok but larger than a smartphone.',
style: TextStyle(fontSize: 20.0),
)
],
),
),
),
);

IT DEPARTMENT
READING MATERIAL
}
}
Que:8: Explain Icon widget with example.

An icon is a graphic image representing an application or any specific entity containing
meaning for the user. It can be selectable and non-selectable.
Flutter provides an Icon Widget to create icons in our applications. We can create icons in
Flutter, either using inbuilt icons or with the custom icons. Flutter provides the list of all
icons in the Icons class.
Icon Widget Properties
Flutter icons widget has different properties for customizing the icons. These properties are
explained below:
icon It is used to specify the icon name to display in the application. Generally,
Flutter uses material design icons that are symbols for common actions and
items.
color It is used to specify the color of the icon.
size It is used to specify the size of the icon in pixels. Usually, icons have equal
height and width.
textDirection It is used to specify to which direction the icon will be rendered.
Example of Icon widget:

Column(
children: [
ClipRect(child:
Icon(Icons.account_circle,
size: 120,
color: Colors.deepOrange,),
),
Text('Trupti Dilhiwala',style: TextStyle(fontSize: 14,fontWeight:FontWeight.bold),),
],
),

IT DEPARTMENT
READING MATERIAL
Que:9: Explain Container widget with example.
Container class in flutter is a convenience widget that combines common painting,

positioning, and sizing of widgets. A Container class can be used to store one or more widgets
and position them on the screen according to our convenience. Basically, a container is l ike
a box to store contents. A basic container element that stores a widget has a margin, which
separates the present container from other contents. The total container can be given
a border of different shapes, for example, rounded rectangles, etc. A container surrounds its
child with padding and then applies additional constraints to the padded extent
(incorporating the width and height as constraints, if either is non-null).
Fig: Container
Properties of Container Class:
Properties Description
child Container widget has a property ‘child:’ which stores

its children. The child class can be any widget. Let us
take an example, taking a text widget as a child.
color The color property sets the background color of the

entire container. Now we can visualize the position of
the container using a background color.
height and width By default, a container class takes the space that is
required by the child. We can also specify the height
and width of the container based on our requirements.
margin The margin is used to create an empty space around

the container. Observe the white space around the
container. Here EdgeInsets.geometry is used to set the

IT DEPARTMENT
READING MATERIAL
margin .all() indicates that the margin is present in all

four directions equally.
padding The padding is used to give space from the border of

the container form its children. Observe the space
between the border and the text.
alignment The alignment is used to position the child within the

container. We can align in different ways: bottom,
bottom center, left, right, etc. here the child is aligned
to the bottom center.
Que:10: Explain Row widget and Column widget in Flutter.

Row and Column are the two most important and powerful widgets in Flutter. These
widgets let you align children horizontally and vertically as per the requirement. As we know
that when we design any UI(User Interface) in a flutter, we need to arrange its content in the
Row and Column manner so these Row and Column widgets are required when designing
UI.
Properties of Row and Column Widgets:
children This property takes in List<Widget>, that is a list of widgets to

display inside the Row or the Column widget.
clipBehaviour This property holds Clip class as the object to decide whether the
content on the Row or Column should be clipped or not.
crossAxisAlignment The crossAxisAlignment takes in CrossAxisAlignment enum as the

object to how the children’s widgets should be places
in crossAxisAlignment. For Row it is vertical and for Column it is
horizontal.
direction This property holds as the Axis enum object to decide the direction
used in the main axis. For Row and Column, it is fixed.

IT DEPARTMENT
READING MATERIAL
mainAxisAlignment This property takes in MainAxisAlignment enum as the object to

decide how the children widgets should be place
in mainAxisAlignment. For Row it is horizontal and for Column it is
vertical.
mainAxisSize This property decides the size of main-axis by taking in MainAxisSize

enum as the object.
runtimeType This property tells the run-time type of the Row or Column widget.
textBaseline This property is responsible for the alignment of the text in

the Row or Column widget with respect to a baseline.
textDirection This property controls the text direction of

the Row or Column widget, which can either be from left-to-right (by
default) or right-to-left.
verticalDirection This property takes in VerticalDirection enum as the object to

determine the order in which the children should be layered.
Row Column
Example of Row widget:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children:[
Container(
width: 50,

IT DEPARTMENT
READING MATERIAL
height: 100,
color: Colors.deepOrange,
),
Container(
width: 50,
height: 100,
color: Colors.tealAccent,
),
Container(
width: 50,
height: 100,
color: Colors.teal,
),
Container(
width: 50,
height: 100,
color: Colors.amber,
),
],
),
Example of Column widget:
Column(
mainAxisAlignment: MainAxisAlignment.center,
children:[
Container(
width: 50,
height: 100,
color: Colors.deepOrange,
),
Container(
width: 50,
height: 100,
color: Colors.tealAccent,
),
Container(
width: 50,
height: 100,
color: Colors.teal,
),
Container(
width: 50,
height: 100,
color: Colors.amber,

IT DEPARTMENT
READING MATERIAL
),
],
),
Que:10: Explain Expanded class with example.

When we create any child of a row or column we provide the size of the widget according to
the screen size but sometimes when we provide more size of child as compared to screen size
we get a warning and our widget goes out of the screen for resolving this we put a child of a
row or column in an expanded widget so that the child occupies only the available space
along the main axis. When we create multiple children then the available space between the
children will divide according to the flex factor. An expanded widget contains only the
stateful widget or stateless widget not other kinds of widgets like RenderObjectWidgets.
Properties of Expanded Class:
child This is the widget present below the expanded class
flaxFactor Flex factor is the ratio in which available space is divided among the children
to occupy the main axis. If the flex factor is zero or NULL the child will
allocate its size on its own.
key It manages how one widget is replaced by another widget
flexFit It defines how flexible one widget to acquire available space.
Example of Expanded class

return Center(
//Here we are using the row.
// Instead of row we can also use
// column only the alignment of icon
// will change and other function remains same
child: Row(
children: <Widget>[
Expanded(
// FlatButton is used to make
// are image as a button which we can press.
child: TextButton(

IT DEPARTMENT
READING MATERIAL
child: Container(
padding: const EdgeInsets.all(14),
child: Image.asset('image/dicel.png'),
),
onPressed: () {},
),
), //Expanded
], //<Widget>
), //Row
); //center
}
Que:11:Explain ElevatedButton in Flutter.
Elevated Button is a flutter component included inside the material package

i.e. “package:flutter/material.dart“. The main characteristic these buttons hold is the slight
elevation in their surface towards the screen on getting tapped by the user. In simple
language, elevated buttons are un-deprecated raised buttons with no explicitly defined button
styling. Elevated Buttons cannot be styled i.e. you cannot modify the color of the button, font
size, text style, etc explicitly like raised buttons.
Parameters
Elevated Button offers two important parameters:

1. child: this represents the button’s label.
ElevatedButton(
child: const Text('Raised Button'),
),
2. onPressed: this represents the action to be executed when the button is tapped
onPressed: () => Navigator.of(context)

.push(MaterialPageRoute(builder: (context) => const NewScreen())),
Properties of Elevated Button

IT DEPARTMENT
READING MATERIAL
focusNode represents the focus node of the widget
ButtonStyle decides the styling of the button
onLongPress the action to be executed when the button is long pressed by the user
enabled gives a boolean value for the activity of the button
onFocusChanged a method to be executed on changing the focus of the button
onHover actin to be executed when the user hovers the button
Styling a Button
The styling of an elevated button is quite different from the rest of the buttons. You have to
use ButtonStyle as a style parameter. After that, pass ElevatedButtonThemeData is
passed as button theme to ThemeData. Styling for elevated button is done
using ElevatedButton.styleFrom. Specific styling for a button explicitly is done
using ButtonStyle parameter as given below:
ElevatedButton(
child: Text('Elevated Button'),
style: ElevatedButton.styleFrom(
primary: Colors.green,
),
onPressed: () {},
),
Example of Elevated Button

IT DEPARTMENT
READING MATERIAL

return Container(
child: Center(
child: ElevatedButton(
child: Text('Elevated Button'),
style: ElevatedButton.styleFrom(
primary: Colors.green,
// side: BorderSide(color: Colors.yellow, width: 5),
textStyle: const TextStyle(
color: Colors.white, fontSize: 25, fontStyle: FontStyle.normal),
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),
shadowColor: Colors.lightBlue,
),
onPressed: () => Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => const NewScreen())),
),
),
);
}
Que:12: Explain checkbox widget in Flutter.
Checkbox in flutter is a material design widget. It is always used in the Stateful Widget as it
does not maintain a state of its own. We can use its onChanged property to interact or modify
other widgets in the flutter app. Like most of the other flutter widgets, it also comes with
many properties like activeColor, checkColor, mouseCursor, etc, to let developers have full
control over the widget’s look and feel.
Properties of Checkbox Widget:
activeColor This property takes the Color class as the object to fill in the ChechBox when
it is checked.
autofocus This property takes in a boolean value as the object. If it is set to true
the CheckBox gets selected at the initial focus.
checkColor This property also takes in Color class as the object. It assigns color to the
check icon.
focusColor This property also takes in Color class as the object to give color to the
checkbox when it is in focus.

IT DEPARTMENT
READING MATERIAL
focusNode It sets an additional focus node to get the focus of the cursor. It takes
in FocusNode as the object.
hoverColor The hoverColor property takes in Color class as the object. It controls the
color of the checkbox at the time of hover.
onChanged ValueChanged<T> typedef is the object given to this property. It is called

when the value in the CheckBox widget should be changed.
value This property takes in a boolean value as the object to determine whether
the CheckBox is checked or not.
Example of checkbox widget

/** Checkbox Widget **/
Checkbox(
value: this.value,
onChanged: (bool value) {
setState(() {
this.value = value;
});
},
), //Checkbox
Ques:13: Explain radiobutton widget in Flutter.

A radio button is also known as the options button which holds the Boolean value. It allows
the user to choose only one option from a predefined set of options. This feature makes it
different from a checkbox where we can select more than one option and the unselected state
to be restored. We can arrange the radio button in a group of two or more and displayed on
the screen as circular holes with white space (for unselected) or a dot (for selected). We can
also provide a label for each corresponding radio button describing the choice that the radio
button represents. A radio button can be selected by clicking the mouse on the circular hole or
using a keyboard shortcut.
Properties of Radio Widget
groupValue: It is used to specify the currently selected item for the radio button group.
title: It is used to specify the radio button label.
value: It specifies the backhand value, which is represented by a radio button.

IT DEPARTMENT
READING MATERIAL
onChanged: It will be called whenever the user selects the radio button.
Example of radio widget

return Column(
children: <Widget>[
ListTile(
title: const Text('www.javatpoint.com'),
leading: Radio(
value: BestTutorSite.javatpoint,
groupValue: _site,
onChanged: (BestTutorSite value) {
setState(() {
_site = value;
});
},
),
),
}
Que:14: Explain theme in Flutter.

Themes are an integral part of UI for any application. Themes are used to design the fonts
and colors of an application to make it more presentable. In Flutter, the Theme widget is used
to add themes to an application. One can use it either for a particular part of the application
like buttons and navigation bar or define it in the root of the application to use it throughout
the entire app.
In themes some of the properties that can be used are given below:
• TextTheme
• brightness
• primarycolor
• accentColor
• fontFamily

IT DEPARTMENT
READING MATERIAL
Properties of Theme Widget:
child The child property takes in a widget as the object to show below
the Theme widget in the widget tree.
data This property takes in ThemeData class as the object to specify the
styling, colors and typography to be used.
isMaterialAppTheme This property takes in a boolean (final) as the object. If it is set to

true then theme uses the material design.
Example of Theme widget:

MaterialApp(
title: title,
theme: ThemeData(
// UI
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],
// font
fontFamily: 'Georgia',
//text style
textTheme: TextTheme(
headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
),
)
);
Que:15: Explain safearea widget in Flutter.
In simple words, SafeArea is basically a padding widget, which adds any necessary padding
to your app, based on the device it is running on. If your app’s widgets are overlaying any of
the system’s features like notches, status bar, camera holes, or any other such features,
then SafeArea would add padding around the app, as required.
Internally SafeArea uses MediaQuery to check the dimensions of the display screen and
includes extra padding if needed.

IT DEPARTMENT
READING MATERIAL
Properties of safearea widget
bottom This property is of type bool. It is true by default and

setting it to false would disable SafeArea from adding
padding to the bottom of the screen.
top This property is also of type bool and setting it to false

would avoid padding at top of the screen.
Left This property is of type bool and setting it to false would

avoid padding at left side of the screen.
right This property is of type bool and setting it to false would

avoid padding at right side of the screen.
minimum This property is of type EdgeInsets. You can specify the

minimum padding to be added using this property.
maintainBottomViewPadding This property is of type bool and it specifies

whether SafeArea should maintain the viewPadding instead
of padding. For instance, if you are using an on-screen
keyboard with SafeArea , the the padding can be maintained
below the obstruction rather than being consumed.
Example of safearea widget

return MaterialApp(
home: SafeArea(
top: true
child: Scaffold(
body: Text(
'This is an example explaining use of SafeArea',
style: TextStyle(color: Colors.green, fontSize: 20),
),
),
),
);
}

IT DEPARTMENT
READING MATERIAL
Que:16: Explain flexible widget in Flutter.

Flexible is a built-in widget in flutter which controls how a child of base flex widgets that
are Row, Column, and Flex will fill the space available to it. The Expanded widget in flutter
is shorthand of Flexible with the default fit of FlexFit.tight. Flexible widget plays a very
important part in making a responsive app that looks and feels the same across multiple
device sizes. But if one wants just basic filling up of spaces by widgets, then Expanded is
also a good candidate for that.
Properties of Flexible Widget:
debugTypicalAncestorWidgetClass This property takes Type as a parameter to set

the ParentData for error messages.
fit This property takes FlexFit value as a parameter. It

decides how a Flexible child widget will fill the space
available to it. A child widget can choose to take the
maximum area with FlexFit.tight value or it can
choose a minimum area with FlexFit.loose value. Or
it can be assigned FlexFit.values.
flex This property takes an integer as a parameter. It

decides the size of the child widget along the main-
axis (for Row it is horizontal and vertical for Column)
with respect to other children widgets.
Example of Flexible widget:
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
height: 175,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.red,
), //BoxDecoration
), //Container
), //Flexible

IT DEPARTMENT
READING MATERIAL
Que:17: Difference between stateless and stateful widget in Flutter.
StatelessWdget StatefulWidget
Stateless Widgets are static widgets. Stateful Widgets are dynamic widgets.
They do not depend on any data change They can be updated during runtime
or any behavior change. based on user action or data change.
Stateless Widgets do not have a state, Stateful Widgets have an internal state
they will be rendered once and will not and can re-render if the input data
update themselves, but will only be changes or if Widget’s state changes.
updated when external data changes.
For Example: Text, For Example: Checkbox, Radio Button,

Icon, RaisedButton are Stateless Slider are Stateful Widgets
Widgets.

Unit 3 Mad - 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit 3 Mad - 1

Uploaded by

Copyright:

Available Formats

BHAGWAN MAHAVIR UNIVERSITY

BHAGWAN MAHAVIR POLYTECHNIC

Mobile App Development –

Mobile App Development – Theory (1030106601)

Chapter 3: Working with widgets

Que:1: What is Flutter Widgets?

Mobile App Development – Theory (1030106601) Page 1 of 28

• Platform specific widgets

Platform specific widgets

Mobile App Development – Theory (1030106601) Page 2 of 28

• Row − Arrange its children in the horizontal direction.

State maintenance widgets

Que:2: What is Visible and Invisible widgets in Flutter?

1. Visible (Output and Input)

Mobile App Development – Theory (1030106601) Page 3 of 28

Que:3: What is state management widget in Flutter?

class Car extends StatefulWidget {

Mobile App Development – Theory (1030106601) Page 4 of 28

class MyStatelessCarWidget extends StatelessWidget {

Que:4: Explain MaterialApp widget with example.

Properties of MaterialApp widget:

color It controls the primary color used in the application.

debugShowCheckedModeBanner This property takes in a boolean as the object to decide

home This property takes in widget as the object to show on

Mobile App Development – Theory (1030106601) Page 5 of 28

theme This property takes in ThemeData class as the object to

themeMode This property holds ThemeMode enum as the object to

title The title property takes in a string as the object to

Example of MaterialApp widget:

class GFGapp extends StatelessWidget {

Mobile App Development – Theory (1030106601) Page 6 of 28

Que:5: Explain Scaffold widget with example.

Properties of Scaffold Class:

app-Bar It displays a horizontal bar which mainly placed at the top of

body It will display the main or primary content in the Scaffold. It is

backgroundColor used to set the color of the whole Scaffold widget.

FloatingActionButton is a button that is placed at the right bottom

drawer is a slider menu or a panel which is displayed at the side of

bottomNavigationBar is like a menu at the bottom of the Scaffold.

Mobile App Development – Theory (1030106601) Page 7 of 28

Example of Scaffold widget:

Widget build(BuildContext context)

Example of Appbar property:

Widget build(BuildContext context) {

Widget build(BuildContext context) {

Mobile App Development – Theory (1030106601) Page 8 of 28

Mobile App Development – Theory (1030106601) Page 9 of 28

Que:6: Explain Appbar widget with example.

Properties of Appbar Widget:

actions This property takes in a list of widgets as a parameter to be displayed

title This property usually takes in the main widget as a parameter to be

Mobile App Development – Theory (1030106601) Page 10 of 28

Que:7: Explain Image widget with example.

To display an image in Flutter, do the following steps:

Step 2: Next, inside this folder, add one image manually.

Mobile App Development – Theory (1030106601) Page 11 of 28

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

Mobile App Development – Theory (1030106601) Page 12 of 28

Que:8: Explain Icon widget with example.

Icon Widget Properties

color It is used to specify the color of the icon.

textDirection It is used to specify to which direction the icon will be rendered.