Mobile Application Development using Flutter

(MADF) (2105CS303)

Unit : 2
UI Design, State
Management,
Navigation
Prof. Mehul Bhundiya
Computer Science & Engineering Department
Darshan Institute of Engineering & Technology, Rajkot
[email protected]
+91 - 9428231065
Introduction to flutter widgets
 Flutter widgets are built using a modern framework.
 Widgets describe their view on screen how it look, current configuration and state.
 Each element on a screen of the Flutter app is a widget.
 Widgets are nested with each other to build the app.
 It means the root of your app is itself a widget, and all the way down is a widget also.
My App

Material App
My Home
Page
Scaffold

App Bar Safe Area Bottom Bar

Text Column Row
#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming
Prof. Mehul Bhundiya 2
Widget Types
 There are two main types of widgets in Flutter.
1. Stateless widgets
2. Stateful widgets
 Stateless widgets:
 It do not have any mutable(Changeable) state.
 Their properties cannot change after they have been created.
 It is used for simple UI elements, such as text, buttons, and images.
 Stateful widgets:
 It has mutable(Changeable) state.
 Their properties can change over time.
 It is typically used for more complex UI elements, such as lists, forms, and dialogs.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 3
Widget Types
 There are a number of other types of widgets in Flutter.
 Layout widgets
 It is used to arrange other widgets on the screen.
 Ex: The Row and Column widgets are layout widgets that can be used to arrange widgets in a horizontal or
vertical layout.
 Inherited widgets
 It is used to share state between multiple widgets.
 Ex: The Theme widget is an inherited widget that can be used to share the current theme across an entire
app.
 Gesture detectors
 It is used to detect user input, such as taps, drags, and scrolls.
 Ex: The Gesture Detector widget can be used to detect a tap on a widget.
 Animated widgets
 It is used to create animations.
 Ex: The FadeTransition widget can be used to fade in or out a widget over a period of time.
#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming
Prof. Mehul Bhundiya 4
Stateless Vs Statefull Widgets
Stateless Statefull
State is Immutable State is Mutable
Used for Simple UI elements Used for Complex UI elements
Widget does not change in the runtime It will change its description in runtime
It is reusable as its state is not changed It is less reusable as the state needs to be
managed
Performance is efficient Can be inefficient if the state changes frequently
Ex. Text, Button, Image Ex. List, Form, Dialog

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 5
Structure of flutter app
 The structure of a Flutter application is based on the widget tree.
 The widget tree is a hierarchical structure of widgets that represents the entire UI of the
application.
 The root of the widget tree is the MaterialApp widget, which is the main entry point for all
Flutter applications.

Structure
1 MaterialApp
2 Scaffold
3 AppBar
4 Body
5 Center
6 Text("Hello, world!")

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 6
MaterialApp
 MaterialApp is a predefined class or widget in a flutter.
 It is likely the main or core component of a flutter app.
 It provides a wrapper around other Material Widgets.
 We can access all the other components and widgets provided by Flutter SDK using
MaterialApp class.
 There are different properties available to access
 action: This property takes in Map<Type, Action<Intent>> as the object. It controls intent keys.
 backButtonDispatcher: It decided how to handle the back button.
 color: It controls the primary color used in the application.
 darkTheme: It provided theme data for the dark theme for the application.
 home: This property takes in widget as the object to show on the default route of the app.
 initialRoute: This property takes in a string as the object to give the name of the first route in which the
navigator is built.
 locale: It provides a locale for the MaterialApp.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 7
MaterialApp
 title: The title property takes in a string as the object to decide the one-line description of the
app for the device.
 theme: This property takes in ThemeData class as the object to describe the theme for the
MaterialApp.
 There are plenty more properties associated with it.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 8
Example
1 import 'package:flutter/material.dart';
2
3 void main() {
4 runApp(const GFGapp());
5 }
6
7 class MaterialScreen extends StatelessWidget {
8 const MaterialScreen({Key? key}) : super(key: key);
9
10 @override
11 Widget build(BuildContext context) {
12 return MaterialApp(
13 title: 'Darshan University',
14 theme: ThemeData(primarySwatch: Colors.green),
15 darkTheme: ThemeData(primarySwatch: Colors.grey),
16 color: Colors.amberAccent,
17 supportedLocales: {const Locale('en', ' ')},
18 debugShowCheckedModeBanner: false,
19 home: Scaffold(
20 appBar: AppBar(title: const Text('Darshan University')),
21 ),
22 );
23 }
24 }

Prof. Mehul Bhundiya #2105CS303 (MDAF)  Unit 2 – UI Design, State Management, Navigation 9
Scaffold
 The Scaffold widget is a layout widget.
 It provides a basic structure for the UI of a Flutter application.
 It includes an AppBar at the top of the screen, a Body in the center of the screen, and a
FloatingActionButton at the bottom of the screen.
 It is a flexible widget that can be customized to meet the specific needs of the application.
 For example, the AppBar can be configured to include a title, a search bar, or a set of actions.
 The Body used to include any widget, such as text, images, lists, or forms.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 10
Properties of Scaffold
Property Description
app-Bar It displays a horizontal bar which mainly placed at the top of the Scaffold.
Body It will display the main or primary content in the Scaffold.
floatingActionButton FloatingActionButton is an icon button that floats over the content of the screen at a fixed
place.
Drawer drawer is a slider menu or a panel which is displayed at the side of the Scaffold.
bottomNavigationBar bottomNavigationBar is like a menu bar at the bottom of the Scaffold.
backgroundColor used to set the color of the whole Scaffold widget.
bottomSheet This property takes in a widget (final) as the object to display it at the bottom of the screen.
endDrawer It is similar to the Drawer, except the fact it opens in the opposite direction.
resize To Avoid Bottom This property takes in a Boolean value as the object. If set to true then the floating widgets on
Insets the scaffold resize themselves to avoid getting in the way of the on-screen keyboard.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 11
Example AppBar
1 Widget build(BuildContext context) {
2 return Scaffold(
3 appBar: AppBar(title: const Text(‘Darshan
4 University')), Scaffold
5 body: const Center(
6 child: Text(
7 "Welcome to Darshan University!!!", Body
8 style: TextStyle(
9 color: Colors.black,
10 fontSize: 40.0,
11 ),
12 ),
13 ),
14 ); Floating
Action
} Button

Prof. Mehul Bhundiya #2105CS303 (MDAF)  Unit 2 – UI Design, State Management, Navigation 12
Safearea
 SafeArea is an important and useful widget in Flutter which makes UI dynamic and adaptive
to a wide variety of devices.
 In Different designs and in certain scenarios, App might overlay any pre-occupied constraints
Like Status bar, notches, navigation bar, etc.
 So, in order to make our UI adaptive and error-free, we use SafeArea widget.
 SafeArea is basically a padding widget, which adds any necessary padding to your app, based
on the device it is running on.
 If App’s widgets are overlaying any of the system’s features like notches, status bar, camera
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.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 13
Properties of SafeArea
Property Description

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.
maintainBottomViewPaddi This property is of type bool and it specifies whether SafeArea should maintain
ng 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.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 14
Without SafeArea
Example
1 @override
2 Widget build(BuildContext context) {
3 return MaterialApp( Without
4 home: Scaffold( SafeArea
5 body: Text('This is an example explaining use of
6 SafeArea',
7 style: TextStyle(color: Colors.green,
8 fontSize: 20
9 ),
10 ),
11 ),
12 );
}

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 15
With SafeArea
Example
1 @override
2 Widget build(BuildContext context) {
3 return MaterialApp( Using
4 home: SafeArea( SafeArea
5 top: true
6 child: Scaffold(
7 body: Text(
8 'This is an example explaining use of SafeArea',
9 style: TextStyle(color: Colors.green, fontSize: 20),
10 ),
11 ),
12 ),
13 );
14 }

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 16
Text Widget
 A Text is a widget in Flutter that allows us to display a string of text with a single line in our
application.
 The text widget can be used by creating the Text widget class and passing the required
parameter string.
Example
1 Text('This is My String, i am the only required parameter');

 It will use the app DefaultTextStyle class style.

 To change the default textStyle we can use style attribute.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 17
Text Styling
Property Description

textAlign This property is used to align the text according. Ex: textAlign: TextAlign.center.
textScaleFactor This property is adjust the font size one is using the textScaleFactor in Text widget or using
TextStyle class. Ex: textScaleFactor: 4.0,
color This property used to set color to the text.
Ex: style: TextStyle(
color: Colors.blue
),
fontWeight This property is used to set weight to the text. Ex.: fontWeight: FontWeight.w300,
fontFamily This property is used to set different font family (.ttf). Ex: fontFamily: "Caveat",

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 18
TextField Widget
 A TextField or TextBox is an input element which holds the alphanumeric data, such as
name, password, address, etc.
 It is a GUI control element that enables the user to enter text information using a
programmable code.
 It can be of a single-line text field or multiple-line text field.
 By default, Flutter decorated the TextField with an underline.
 We can also add several attributes with TextField, such as label, icon, inline hint text, and
error text using an InputDecoration as the decoration.
 If we want to remove the decoration properties entirely, it is required to set the decoration
to null.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 19
Properties of TextField
Property Description

decoration It is used to show the decoration around TextField.

border It is used to create a default rounded rectangle border around TextField.
labelText It is used to show the label text on the selection of TextField.
hintText It is used to show the hint text inside TextField.
Icon It is used to add icons directly to the TextField.

 we can expand a TextField very easily by adding the attributes maxLines (ex. maxLines: 4,).
 We can restrict the maximum number of characters inside the text field by adding
the maxLength attributes (Ex. maxLength: 10,)
 We can convert visible text to password using obscure attribute (Ex.: obscureText: true,).
 Flutter allows the user to retrieve the text in mainly two ways:
 onChanged method.
 the controller method.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 20
TextField
 onChanged method  Controller method
 It is the easiest way to retrieve the  It is the easiest way to retrieve the
text field value. text field value.
 This method store the current value  This method store the current value
in a simple variable and then use it in in a simple variable and then use it in
the TextField widget. the TextField widget.

Example
Example
1 TextEditingController mycontroller = TextEditingController
1 String value = ""; ();
2
2 TextField( TextField(controller: mycontroller,)
3
3 onChanged: (text) {
4
4 value = text; controller.addListener(() {
5
5 }, print(controller.text);
6
6 ) });

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 21
Properties of TextField
Example Example
1 @override 21 Padding(
2 Widget build(BuildContext context) { 22 padding: EdgeInsets.all(15),
3 return Scaffold( 23 child: TextField(
4 appBar: AppBar( 24 obscureText: true,
5 title: Text('Flutter TextField Example'), 25 decoration: InputDecoration(
6 26 border: OutlineInputBorder(),
7 ), 27 labelText: 'Password',
8 body: Padding( 28 hintText: 'Enter Password',
9 padding: EdgeInsets.all(15), 29 ),
10 child: Column( 30 ),
11 children: <Widget>[ 31 ),
12 Padding( 32 RaisedButton(
13 padding: EdgeInsets.all(15), 33 textColor: Colors.white,
14 child: TextField( 34 color: Colors.blue,
15 decoration: InputDecoration( 35 child: Text('Sign In'),
16 border: OutlineInputBorder(), 36 onPressed: (){},
17 labelText: 'User Name', 37 )
18 hintText: 'Enter Your Name', 38 ],
19 ), 39 )
20 ), 40 )
), 41 );
42 }
#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming
Prof. Mehul Bhundiya 22
Row-Column Widget
 These widgets let you align children horizontally and vertically as per the requirement.
 To arrange its content in the Row and Column manner so these Row and Column widgets are
required when designing UI.
 The rows and columns are two different widgets, namely Row and Column.
 Both widgets can set several child widgets.
 A child widget can also be a row or column widget.
 We can align the row's children widget with the help of the following properties.
 start: It will place the children from the starting of the main axis.
 end: It will place the children at the end of the main axis.
 center: It will place the children in the middle of the main axis.
 spaceBetween: It will place the free space between the children evenly.
 spaceAround: It will place the free space between the children evenly and half of that space before and
after the first and last children widget.
 spaceEvenly: It will place the free space between the children evenly and before and after the first and last
children widget.
#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming
Prof. Mehul Bhundiya 23
Row Widget
 This widget arranges its children in a horizontal direction on the screen.
 It will expect child widgets in a horizontal array.
 If the child widgets need to fill the available horizontal space, we must wrap the children
widgets in an Expanded widget.
 A row widget does not scrollable because it displays the widgets within the visible view.
 If we want to make a scrollable list of row widgets, we need to use the ListView widget.
 To aligns its children based on our choice using the property CrossAxisAlignment and
MainAxisAlignment.
 The row's cross-axis will run vertically, and the main axis will run horizontally

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 24
Row Example
Example Example
1 @override 21 Container(
2 Widget build(BuildContext context) { 22 margin: EdgeInsets.all(15.0),
3 return Scaffold( 23 padding: EdgeInsets.all(8.0),
4 appBar: AppBar( 24 decoration:BoxDecoration(
5 title: Text("Flutter Row Example"), 25 borderRadius:BorderRadius.circular(8),
6 ), 26
7 body: Row( 27 color:Colors.green),
8 mainAxisAlignment: MainAxisAlignment.s 28 child: Text("Flutter",style: TextStyle(color:
9 paceEvenly, 29 Colors.yellowAccent,fontSize:25),), ),
10 children:<Widget>[ 30 Container(
11 Container( 31 margin: EdgeInsets.all(12.0),
12 margin: EdgeInsets.all(12.0), 32 padding: EdgeInsets.all(8.0),
13 padding: EdgeInsets.all(8.0), 33 decoration:BoxDecoration(
14 decoration:BoxDecoration( 34 borderRadius:BorderRadius.circular(8),
15 borderRadius:BorderRadius.circular(8), 35
16 36 color:Colors.green),
17 color:Colors.green 37 child: Text("MySQL",style: TextStyle(colo
18 ), 38 r:Colors.yellowAccent,fontSize:25),),
19 child: Text("React.js",style: TextStyle(col 39 )]),
20 or:Colors.yellowAccent,fontSize:25),), 40 );
), }
#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming
Prof. Mehul Bhundiya 25
Column Widget
 It will expect child widgets in a vertical array.
 If the child widgets need to fill the available vertical space, we must wrap the children
widgets in an Expanded widget.
 A column widget does not scrollable because it displays the widgets within the visible view.
 If we want to make a scrollable list of column widgets, we need to use the ListView widget.
 To aligns its children based on our choice using the property CrossAxisAlignment and
MainAxisAlignment.
 The row's cross-axis will run horizontally, and the main axis will run vertically.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 26
Column Example
Example Example
1 @override 21 Container(
2 Widget build(BuildContext context) { 22 margin: EdgeInsets.all(15.0),
3 return Scaffold( 23 padding: EdgeInsets.all(8.0),
4 appBar: AppBar( 24 decoration:BoxDecoration(
5 title: Text("Flutter Row Example"), 25 borderRadius:BorderRadius.circular(8),
6 ), 26
7 body: Column( 27 color:Colors.red),
8 mainAxisAlignment: MainAxisAlignment.s 28 child: Text("Flutter",style: TextStyle(color:
9 paceEvenly, 29 Colors.yellowAccent,fontSize:25),), ),
10 children:<Widget>[ 30 Container(
11 Container( 31 margin: EdgeInsets.all(12.0),
12 margin: EdgeInsets.all(12.0), 32 padding: EdgeInsets.all(8.0),
13 padding: EdgeInsets.all(8.0), 33 decoration:BoxDecoration(
14 decoration:BoxDecoration( 34 borderRadius:BorderRadius.circular(8),
15 borderRadius:BorderRadius.circular(8), 35
16 36 color:Colors.red),
17 color:Colors.red 37 child: Text("MySQL",style: TextStyle(colo
18 ), 38 r:Colors.yellowAccent,fontSize:25),),
19 child: Text("React.js",style: TextStyle(col 39 )]),
20 or:Colors.yellowAccent,fontSize:25),), 40 );
), }
#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming
Prof. Mehul Bhundiya 27
Properties of Row and Column Widgets
Property Description

children This property takes in List<Widget>, that is a list of widgets to display inside the Row or
the Column widget.
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.
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.
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.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 28
Stack Widgets
 The stack is a widget in Flutter that contains a list of widgets and positions them on top of the
other.
 It allows to overlap multiple widgets into a single screen and renders them from bottom to
top.
 The first widget is the bottommost item, and the last widget is the topmost item.
 The child widget in a stack can be either positioned or non-positioned.
Example
1 Stack(
2 children: <Widget>[
3 Container(
4 color: Colors.green,
5 ),
6 Container(
7 color: Colors.blue,
8 ),
9 Container(
10 color: Colors.yellow,
11 )
12 ],
13 ),
#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming
Prof. Mehul Bhundiya 29
Properties of Stack
Property Description
alignment It determines how the children widgets are positioned in the stack. It can be top, bottom, center,
center-right, etc. Ex: alignment: Alignment.topCenter,
textDirection It determines the text direction. It can draw the text either ltr (left to right) or rtl (right to the left). Ex:
textDirection: TextDirection.rtl,
fit It will control the size of non-positioned children widgets in the stack. It has three types: loose,
expand and passthrough. The loose used to set the child widget small, the expand attribute makes the
child widget as large as possible, and the passthrough set the child widget depending on its parent
widget. Ex. fit: StackFit.passthrough,
overflow It controls the children widgets, whether visible or clipped, when it's content overflowing outside the
stack. Ex.: overflow: Overflow.clip,
clipBehavior It determines whether the content will be clipped or not.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 30
Expanded Widget
 Expanded widget in flutter take all the available space inside Row-Column.
 It is handy when we want a child widget or children widgets to take all the available space
along the main-axis.
 For Row the main axis is horizontal & vertical for Column.
 Expanded widget always be taken as the child of Row, Column, and Flex.
 Expanded widget is similar to the Flexible widget in flutter, with its fit property set
to FlexFit.tight as default.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 31
Properties of Expanded Widgets
Property Description

child This property sets the widget tree to be placed inside

the Expanded widget. Expanded widget can be taken as the child of Row, Column, and
Flex.
debugTypicalAncestorWidgetCla This property takes Type as a parameter to set the ParentData for error messages.
ss
Fit This property controls how the child widget fills the available space. There are two
options given by flutter, the first is FlexFit.tight which sets the child to fill the space
available to it and the second is FlexFit.loose which allows the child widget to be as large
as the available space.
flex If we decide to distribute the available space unevenly among the children widgets then
we use the flex factor to do the same.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 32
Expanded Widget Example
Example Example
1 @override 21 child: Text(
2 Widget build(BuildContext context) { 22 'Second widget',
3 23 style: TextStyle(
4 return Scaffold( 24 color: Colors.white,
5 body: Center( 25 ),), ),
6 child: Column( 26 color: Colors.amber,
7 children: <Widget>[ 27 width: 200,
8 Container( 28 ),),
9 child: Center( 29 Container(
10 child: Text( 30 child: Center(
11 'First widget', 31 child: Text(
12 style: TextStyle( 32 'Third widget',
13 color: Colors.white, 33 style: TextStyle(
14 ), ),), 34 color: Colors.white,
15 color: Colors.blue, 35 ),),),
16 height: 100, 36 color: Colors.orange,
17 width: 200, 37 height: 100,
18 ), 38 width: 200,
19 Expanded( 39 ),],)),),
20 child: Container( 40
child: Center(
#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming
Prof. Mehul Bhundiya 33
Container Widget
 The container in is a parent widget that can contain single child widget and manage them
efficiently through width, height, padding, background color, etc.
 It is a widget that combines common painting, positioning, and sizing of the child widgets.
 It is similar to a box for storing contents.
 It allows many attributes to the user for decorating its child widgets.
 A container widget is same as <div> tag in html.
 If this widget does not contain any child widget, it will fill the whole area on the screen
automatically.
 Otherwise, it will wrap the child widget according to the specified height & width.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 34
Container Widget
 A basic container has a margin, border, and padding properties surrounding
its child widget, as shown in the image.
 If we have a widget that needs some background styling may be a color,
shape, or size constraints, we may try to wrap it in a container widget.
 This widget helps us to compose, decorate, and position its child widgets.
Property Description
child This property is used to store the child widget of the container.
color This property is used to set the background color.
height and width This property is used to set the container's height and width according to our
needs. By default, it takes the space based on its child widget.
margin This property is used to surround the empty space around the container.
padding This property is used to set the distance between the border of the container
and its child widget.
decoration This property allows the developer to add decoration on the widget. It
decorates or paint the widget behind the child.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 35
Card Widget
 Card is a build-in widget in flutter which derives its design from Google’s Material Design
Library.
 It is a rounded corner shape and has a shadow.
 We just need to call the card constructor and then pass a widget as child property for
displaying the content.
Property Description
borderOnForeground It is used to paint the border in front of a child. By default, it is true. If it is
false, it painted the border behind the child.
Color This property is used to set the background color.
Elevation It controls the shadow size below the card. The bigger elevation value makes
the bigger shadow distance.
margin This property is used to surround the empty space around the container.
shape It is used to specify the shape of the card.
shadowColor It is used to paint the shadow of a card.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 36
Card Widget Example
Example Example
1 @override 23 subtitle: Text(
2 Widget build(BuildContext context) { 24 'Best of Sonu Nigam Music.',
3 return Center( 25 style: TextStyle(fontSize: 18.0)
4 child: Container( 26 ),
5 width: 300, 27 ),
6 height: 200, 28 ButtonBar(
7 padding: new EdgeInsets.all(10.0), 29 children: <Widget>[
8 child: Card( 30 RaisedButton(
9 shape: RoundedRectangleBorder( 31 child: const Text('Play'),
10 borderRadius: BorderRadius.circular(15 32 onPressed: () {/* ... */},
11 .0), ), 33 ),
12 color: Colors.red, 34 RaisedButton(
13 elevation: 10, 35 child: const Text('Pause'),
14 child: Column( 36 onPressed: () {/* ... */},
15 mainAxisSize: MainAxisSize.min, 37 ), ],
16 children: <Widget>[ 38 ),
17 const ListTile( 39 ],
18 leading: Icon(Icons.album, size: 60), 40 ),
19 title: Text( 41 ),
20 'Sonu Nigam', 42 )
21 style: TextStyle(fontSize: 30.0) 43 );
22 ), 44 }
#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming
Prof. Mehul Bhundiya 37
Listview Widget
 ListView is a scrollable list of widgets arranged linearly.
 It displays its children one after another in the scroll direction i.e, vertical or horizontal.
 There are two types of ListViews:
 ListView
 ListView.builder

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 38
Listview Widget
 A ListView simply takes a list of widgets and makes it scrollable .
This is used with a few children as the List.
Property Description
itemExtent The itemExtent takes in a double value as the object to controls the
scrollable area in the ListView.
padding It holds EdgeInsetsGeometryI as the object to give space between
the Listview and its children.
scrollDirection This property takes in Axis enum as the object to decide the
direction of the scroll on the ListView.
shrinkWrap This property takes in a boolean value as the object to decide
whether the size of the scrollable area will be determined by the
contents inside the ListView.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 39
 ListView Widget Example

Example
1 @override
2 Widget build(BuildContext context) {
3 return ListView(
4 padding: EdgeInsets.all(20),
5 children: <Widget>[
6 CircleAvatar(maxRadius: 50,
7 backgroundColor: Colors.black,
8 child: Icon(Icons.person, color: Colors.white, size:
9 50),),
10 Center(child: Text('Sooraj S Nair',
11 style: TextStyle(
12 fontSize: 50,),),),
13 Text(
14 "Lorem Ipsum is simply dummy text of the
15 printing and typesetting industry. Lorem Ipsum has been the ",
16 style: TextStyle(fontSize: 20,),),
17 ],
18 ),
}

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 40
Listview.builder()
 The builder() constructor constructs a repeating list of widgets.
 The constructor takes two main parameters:
 itemCount: It is used for the number of repetitions for the widget to be constructed.
 itemBuilder: It is used for constructing the widget which will be generated ‘itemCount‘ times.

Example
1 @override
2 Widget build(BuildContext context) {
3 return ListView.builder(
4 itemCount: 20,
5 itemBuilder: (context, position) {
6 return Card(
7 child: Padding(
8 padding: EdgeInsets.all(20.0),
9 child: Text(
10 position.toString(),
11 style: TextStyle(fontSize: 22.0),
12 ),),);
13 },),
14 }
#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming
Prof. Mehul Bhundiya 41
Button Widgets
 Buttons are the graphical control element that provides a user to trigger an event.
 Buttons are the Flutter widgets, which is a part of the material design library.
 There are different types of buttons available in flutter:
 Flat Button
 Raised Button
 Floating Button
 Icon Button
 Inkwell Button
 Outline Button

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 42
Flat Button
 It is a text label button that does not have much decoration and displayed without any
elevation.
 The flat button has two required properties that are: child and onPressed().
 It is mostly used in toolbars, dialogs, or inline with other content.
 By default, the flat button has no color, and its text is black.
 But, we can use color to the button and text using color and textColor attributes,
respectively.
Example
1 @override
2 Widget build(BuildContext context) {
3 return FlatButton(
4 child: Text('LogIn', style: TextStyle(fontSize: 20.0),
5 ),
6 color: Colors.blueAccent,
7 textColor: Colors.white,
8 onPressed: () {},
9 ),
10 }

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 43
Raised Button
 It is a button, which is based on the material widget and has a rectangular body.
 It is similar to a flat button, but it has an elevation that will increases when the button is
pressed.
 It adds dimension to the UI along Z-axis.
 It has several properties like text color, shape, padding, button color, the color of a button
when disabled, animation time, elevation, etc.
 This button has two callback functions.
 onPressed(): It is triggered when the button is pressed.
 onLongPress(): It is triggered when the button is long pressed.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 44
Raised Button
Example
1 @override
2 Widget build(BuildContext context) {
3 return RaisedButton(
4 child: Text("Click Here", style: TextStyle(fontSize: 20),),
5 onPressed: _changeText,
6 color: Colors.red,
7 textColor: Colors.yellow,
8 padding: EdgeInsets.all(8.0),
9 splashColor: Colors.grey,
10 )
11 }

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 45
Floating Action Button
 A FAB button is a circular icon button that triggers the primary action in our application.
 We can use this button for adding, refreshing, or sharing the content.
 Flutter suggests using at most one FAB button per screen.
 There are two types of Floating Action Button:
 FloatingActionButton:
 It creates a simple circular floating button with a child widget inside it.
 It must have a child parameter to display a widget.
 FloatingActionButton.extended:
 It creates a wide floating button along with an icon and a label inside it.
 Instead of a child, it uses labels and icon parameters.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 46
Raised Button
Example
1 @override
2 Widget build(BuildContext context) {
3 return Scaffold(
4 floatingActionButton: FloatingActionButton(
5 child: Icon(Icons.navigation),
6 backgroundColor: Colors.green,
7 foregroundColor: Colors.white,
8 onPressed: () => {}, ), ), );
9 }

Example
1 @override
2 Widget build(BuildContext context) {
3 return Scaffold(
4 floatingActionButton: FloatingActionButton.extended(
5 onPressed: () {},
6 icon: Icon(Icons.save),
7 label: Text("Save"),
8 ),
9 ),
10 );
11 }
#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming
Prof. Mehul Bhundiya 47
Icon Button
 InkWell button is a material design concept, which is used for touch response.
 This widget comes under the Material widget where the ink reactions are actually painted.
 It creates the app UI interactive by adding gesture feedback.
 It is mainly used for adding splash ripple effect.
Example
1 @override
2 Widget build(BuildContext context) {
3 return InkWell(
4 splashColor: Colors.green,
5 highlightColor: Colors.blue,
6 child: Icon(Icons.ring_volume, size: 50),
7 onTap: () {
8 setState(() {
9 _volume += 2;
10 });
11 }, ),
12 }

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 48
Outline Button
 It is similar to the flat button, but it contains a thin grey rounded rectangle border.
 Its outline border is defined by the shape attribute.

Example
1 @override
2 Widget build(BuildContext context) {
3 return OutlineButton(
4 child: Text("Outline Button", style: TextStyle(fontSize: 20.0),
5 ),
6 highlightedBorderColor: Colors.red,
7 shape: RoundedRectangleBorder(
8 borderRadius: BorderRadius.circular(15)),
9 onPressed: () {},
10 ),
11 }, ),
12 }

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 49
Image Widget
 When you create an app in Flutter, it includes both code and assets (resources).
 An asset is a file, which is bundled and deployed with the app and is accessible at runtime.
 The asset can include static data, configuration files, icons, and images.
 The Flutter 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.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 50
Display local images 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.
Example
1 assets:
2 - assets/tablet.png
3 - assets/background.png

 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.
Example
1 flutter:
2 assets:
3 - assets/

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 51
Image Widget
Example
1 @override
2 Widget build(BuildContext context) {
3 return Scaffold(
4 body: Center(
5 child: Column(
6 children: <Widget>[
7 Image.asset('assets/tablet.png'),
8 Text(
9 'A tablet is a wireless touch screen computer that is smaller than a note
10 book but larger than a smartphone.',
11 style: TextStyle(fontSize: 20.0),
12 )
13 ],
14 ),
15 ),
16 );
17 }

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 52
Display images from the internet
 Displaying images from the internet or network is very simple.
 Flutter provides a built-in method Image.network to work with images from a URL.
 The Image.network method also allows you to use some optional properties, such as height,
width, color, fit, and many more.
 We can use the following syntax to display an image from the internet.
Example
1 Image.network(
2 'https://picsum.photos/250?image=9',
3 )

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 53
Navigation and Routing
 Navigation and routing are some of the core concepts of all mobile application.
 It allows the user to move between different pages.
 The screens and pages are known as routes, and these routes are just a widget.
 In Android, a route is similar to an Activity, whereas, in iOS, it is equivalent to
a ViewController.
 the way to handle the navigation to different pages is known as routing.
 Flutter provides a basic routing class MaterialPageRoute and two
methods Navigator.push() and Navigator.pop() that shows how to navigate between two
routes.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 54
Navigation and Routing
 The following steps are required to start navigation in your application.
 Step 1: First, you need to create two routes.
 Step 2: Then, navigate to one route from another route by using the Navigator.push() method.
 Step 3: Finally, navigate to the first route by using the Navigator.pop() method.
Route - 1 Route - 2
1 @override 1 @override
2 Widget build(BuildContext context) { 2 Widget build(BuildContext context) {
3 return Scaffold( 3 return Scaffold(
4 appBar: AppBar( 4 appBar: AppBar(
5 title: Text('First Route'), 5 title: Text("Second Route"),
6 ), 6 ),
7 body: Center( 7 body: Center(
8 child: RaisedButton( 8 child: RaisedButton(
9 child: Text('Open route'), 9 onPressed: () {
10 onPressed: () { 10 // Navigate back to first route when tapped.
11 // Navigate to second route when tapped. 11
12 12 },
13 }, 13 child: Text('Go back!'),
14 ), 14 ),
15 ), 15 ),
16 ); 16 );
} Prof. Mehul Bhundiya }  Unit 2 – Introduction to dart programming
#2105CS303 (MDAF)
55
Navigator.push()
 The Navigator.push() method is used to navigate/switch to a new route/page/screen.
 Here, the push() method adds a page/route on the stack and then manage it by using
the Navigator.
 Again we use MaterialPageRoute class that allows transition between the routes using a
platform-specific animation.

Example
1 // Within the `FirstRoute` widget
2 onPressed: () {
3 Navigator.push(
4 context,
5 MaterialPageRoute(builder: (context) => SecondRoute()),
6
7 );
}

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 56
Navigator.pop()
 The pop() method allows us to remove the current route from the stack, which is managed by
the Navigator.
 we need to use Navigator.pop() method to close the second route and return to the first route.

Example
1 // Within the SecondRoute widget
2 onPressed: () {
3 Navigator.pop(context);
4 }

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 57
Navigation Using MaterialPageRoute
Route - 1 Route - 2
1 @override 21 @override
2 Widget build(BuildContext context) { 22 Widget build(BuildContext context) {
3 return Scaffold( 23 return Scaffold(
4 appBar: AppBar( 24 appBar: AppBar(
5 title: Text('First Route'), 25 title: Text("Second Route"),
6 ), 26 ),
7 body: Center( 27 body: Center(
8 child: RaisedButton( 28 child: RaisedButton(
9 child: Text('Open route'), 29 onPressed: () {
10 onPressed: () { 30 Navigator.pop(context);
11 Navigator.push( 31 },
12 context, 32 child: Text('Go back!'),
13 MaterialPageRoute(builder: (contex 33 ),
14 t) => SecondRoute()), 34 ),
15 ); 35 );
16 }, 36 }
17 ),
18 ),
19 );
20 }

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 58
Navigation with Named Routes
 The Navigator maintains the stack-based history of routes.
 If there is a need to navigate to the same screen in many parts of the app, this approach is not
beneficial because it results in code duplication.
 To this problem can be removed by defining the named routes and can use the named
routes for navigation.
 We can work with named routes by using the Navigator.pushNamed() function.
 This function takes two required arguments (build context and string) and one optional
argument.
 Also, we know about the MaterialPageRoute, which is responsible for page transition.
 The MaterialApp constructor is responsible for defining the initial route and other routes
themselves.
 Here the initial route tells the start of the page and routes property defines the available
named routes and widgets.

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 59
Define the routes

Example
1 MaterialApp(
2 title: 'Named Route Navigation',
3 theme: ThemeData(
4 primarySwatch: Colors.green,
5 ),
6 initialRoute: '/',
7 routes: {
8 '/': (context) => HomeScreen(),
9 '/second': (context) => SecondScreen(),
10 },
11 ));

#2105CS303 (MDAF)  Unit 2 – Introduction to dart programming

Prof. Mehul Bhundiya 60
Navigation with Named Routes
 In this step, we need to call Navigator.pushNamed() method for navigation.
Example
1 Navigator.pushNamed(context, '/second');

Route - 1 Route - 2
1 @override 1 @override
2 Widget build(BuildContext context) { 2 Widget build(BuildContext context) {
3 return Scaffold( 3 return Scaffold(
4 appBar: AppBar( 4 appBar: AppBar(
5 title: Text('First Route'), 5 title: Text("Second Route"),
6 ), 6 ),
7 body: Center( 7 body: Center(
8 child: RaisedButton( 8 child: RaisedButton(
9 child: Text('Open route'), 9 onPressed: () {
10 onPressed: () { 10 Navigator.pop(context);
11 Navigator.pushNamed(context, '/ 11 },
12 second'); 12 child: Text('Go back!'),
13 ); 13 ),
14 }, 14 ),
15 ), 15 );
16 ), 16 }
17 );
} #2105CS303 (MDAF)  Unit 2 – Introduction to dart programming
Prof. Mehul Bhundiya 61
Thank You