UNIT 2 – USER INTERFACE DESIGN

UNIT 3 - NAVIGATING, ROUTING AND

STATE MANAGEMENT

Dr. Jigna Solanky

 AGENDA

• Introduction to widgets
• Stateless and Stateful widgets
• Basic Widgets (Text, Image, container, Elevated Button etc.)
• Building layouts using Row and Column widgets
• Designing Responsive Layouts
 WHAT IS WIDGETS?

• Each element on a screen of the Flutter app is a widget.

• Widgets describes what their view should look like given their
current configuration and state.
• When a widget’s state changes, the widgets rebuilds it
description, which the framework diffs against the previous
description in order to determine the minimal changes needed
in the underlying render tree to transition from one state to the
next.
 WIDGET CATEGORIES

• Widgets can be grouped into 14 categories based on their features:

• Accessibility:
• These are set of widgets that makes a flutter app more easily accessible.
• Animation and Motion:
• These widgets add animation to other widgets.
• Assets, Image and Icon:
• These widgets takes charge of assets such as display images and show
icons.
• Basics:
• Bundle of widgets necessary for the development of any flutter application.
 CONT..

• Async:
• Provides async functionality in the flutter application.
• Cupertino:
• iOS designed widgets
 CUPERTINO WIDGETS

Cupertino widgets (iOS)

CupertinoButton CupertinoDialogAction
CupertinoPicker CupertinoFullScreenDialogTransiti
CupertinoDatePicker on
CupertinoTimePicker CupertinoPageScaffold
CupertinoNavigationBar CupertinoPageTransition
CupertinoTabBar CupertinoActionSheet
CupertinoTabScaffold CupertinoActivityIndicator
CupertinoTabView CupertinoAlertDialog
CupertinoTextField CupertinoPopupSurface
CupertinoDialog CupertinoSlider
 CONT..

• Input:
• Provides input functionality
• Interaction Models:
• Manage touch events and route users to different views in the
application
• Layout:
• Helps in placing the other widgets on the screen as needed.
 CONT..

Layout Widgets:
• Container:
• A rectangular box decorated using BoxDecoration widgets with
background, border and shadow.
• Center:
• Center its child widget
• Row:
• Arrange children in the horizontal direction
 CONT..

• Column:
• Arrange children in vertical direction
• Stack:
• Arrange one above the another
 CONT..

• Painting and Effects:

• Apply visual changes to their child widgets without changing their layout or
shape.
• Scrolling:
• This provides scroll ability to a set of other widgets that are not scrollable by
default
• Styling:
• This deals with the theme, responsiveness, and sizing of the app.
• Text:
• This displays text
• Material Component:
• Set of widgets that mainly follow material design by Google
 MATERIAL WIDGETS

Material widgets (Android)

Scaffold DropdownButton
AppBar PopupMenuButton
BottomNavigationBar ButtonBar
TabBar TextField
TabBarView Checkbox
ListTile Radio
RaisedButton Switch
FloatingActionButton Slider
FlatButton Date and time pickers
IconButton SimpleDialog
AlertDialog
 CONTAINER

• It is a widget that combines common painting, positioning, and

sizing of the child widgets.
• It is also a class to store one or more widgets and position
them on the screen according to your needs.
• It is similar to a box for storing contents.
• Allows many attributes to the user for decorating its child
widgets such as using margin, which separates the container
with other contents.
 CONT..

• Can have only one child but that child can have many subchilds.
• Properties:
• Height
• Width
• Color
• Child
• Padding
• Alignment
• Decoration
• Margin etc..
 CENTER WIDGET

• It aligns its child widget to the center of the available space on

the screen.
 TEXT WIDGET

• The Text widget displays a string of text with single style.

• The string might break across multiple lines or might all be
displayed on the same line depending on the layout
constraints.
• Text can be written either in single quotes or double quotes.
Both are allowed.
• The style argument is optional. When omitted, the text will use
the style from the closest enclosing DefaultTextStyle
 CONT..

• Textalignment
• textdirection
• Style Attributes:
• fontSize
• Color
• fontWeight
• backgroundColor
 BUTTONS

• Buttons are the graphical control elements that provides a user

to trigger an event such as taking actions, making choices,
searching things, and many more.
• They can be placed anywhere in our UI like dialogs, forms,
cards, toolbars, etc.
 TYPES OF BUTTON

• Text Button (Flat Button)

• Elevated Button (Raised Button)
• Outlined Button
• Floating Action Button
• Icon Button
• Dropdown Button
• PopUp Menu Button
 TEXT BUTTON

• These are simple buttons with no extra styling embedded.

• There is no elevation factor included and the button is just a text enclosed
by a colored boundary.
• The Text button has two required properties that are: child and onPressed()

TextButton(
onPressed: () {},
child: const Text(
'Flat Button',
style: TextStyle(color: Colors.white, fontSize: 13.0),
),
• )
 ELEVATED BUTTON

• These buttons are slightly elevated from the screen.

• They have styling options inside them.
• ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
elevation: 12.0,
textStyle: const TextStyle(color: Colors.white)),
child: const Text('Elevated Button’),
)
 OUTLINED BUTTON

• These are simple buttons with text in the center enclosed by a thin border.
You can modify the styling of these buttons by using properties provided in
the material package. They have a slight elevation.
OutlinedButton(
child: Text(
"Outlined Button",
style: TextStyle(
color: Colors.green,
),
),
onPressed: () {},
),
 INKWELL

• InkWell is the material widget in flutter.

• It responds to the touch action as performed by the user.
• InkWell will respond when the user clicks it/Tap on it.
• There are so many gestures like double-tap, long-press, tap down etc.
• It provides facility to any widgets to have onTap, onlongPressed events.
• Only buttons have click events but if you want to implement the click
event of some another widget which don’t have click events. Wrap the
widget inside the InkWell widget.
• InkWell widget will hold single child.
 IMAGE

• 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.
• Add the images in assets/images directory
• Not necessary to give the same name
• Update pubspec.yaml file (indentation is very important)
• assets:
• - assets/images/
 CONT..

• Display Image from Asset

Image.asset(‘assets/images/abc.jpg’)

• Display Image from Internet

Image.network(‘https://images.pexels.com/photos/56866/garden-rose-
red-pink-56866.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1’)

• Fade In Images from Network

FadeInImage.assetNetwork(
placeholder: ‘assets/images/loading.gif’,
image:’ https://images.pexels.com/photos/56866/garden-rose-red-
pink-56866.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1’)
 CONT..

• Fade In Images in Memory

• Add dependency of transparent_image:2.0.1in pubspec.yaml
• Or
• Write in terminal “flutter pub add dev:transparent_image:^2.0.1”
• Import ‘package:transparent_image/transparent_image.dart’
FadeInImage.memoryNetwork(
placeholder: kTranparentImage,
image:’ https://images.pexels.com/photos/56866/garden-
rose-red-pink-56866.jpeg?
auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1’)
 COLUMNS & ROW LAYOUT

• One of the most common layout patterns is to arrange widgets

vertically or horizontally.
• Row widget is used to arrange widgets horizontally, and a
column widget to arrange widgets vertically.
 CONT..

• Row
• We can control how a row widget 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.
 ALIGNMENT OF CHILDREN WIDGETS
IN ROW

• 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.
 CONT..

• Column
• The column's cross-axis will run horizontally, and the main axis
will run vertically.
DRAWBACKS OF ROW AND COLUMN
WIDGET

• Row widget in Flutter does not have horizontal scrolling. So if

we have inserted a large number of children in a single row
that cannot be fit in that row, we will see the Overflow
message.
• Column widget in Flutter does not have vertical scrolling. So if
we have inserted a large number of children in a single column
whose total children size is not equal to the height of the
screen, we will see the Overflow message.
 SCROLL VIEW

• Provides horizontal and vertical scrolling facility to the widgets

which does not have default scrolling available.
• Property:
• SingleChildScrollView
• Scrolldirection
 LIST VIEW

• List view in flutter is a widget used to display items in a linear

manner.
• Since it is scrollable widget we can display multiple items on
the same screen.
• If a scroll direction is vertical then the children will be arranged
one after another from top to bottom.
• When the scroll direction is horizontal then the children will be
arranged from left to right.
 CIRCLE AVATAR

• It is simply a circle in which we can add background color,

background image, or just some text.
• Usually represents a user with his image or with his initials.
 NAVIGATION

• Navigation in Flutter refers to moving from one screen or page to

another within your app.
• It's a fundamental aspect of building mobile applications, enabling
users to seamlessly explore different sections or features.
• Flutter provides various tools and techniques to implement
navigation effectively.
• Routes are managed by the Navigator widget.
• Navigator manages the stack of route.
• Routes can be pushed on the stack using push() and popped off the
stack using pop() method.
• Top element in the stack is the currently active route.
 CREATE BASIC UI

body: Center(
child: ElevatedButton(
onPressed: () {
// Navigate to a new page here
},
child: Text('Go to New Page'),
),
),
 SETTING UP NAVIGATION

onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
}
 CONT..

• Navigator.push, which pushes a new route onto the

navigation stack.
• The MaterialPageRoute class defines the route, and we're
navigating to a new screen called SecondScreen.
 BASIC NAVIGATION TECHNIQUES

• Using Navigator.push()
• Navigator.push takes two arguments: context and a Route object.
• context is a BuildContext that Flutter uses to locate the Navigator in
the widget tree.
• We create a MaterialPageRoute and specify the builder function,
which returns the widget to be displayed on the new page.
 BASIC NAVIGATION TECHNIQUES

• Popping Routes with Navigator.pop()

onPressed: () {
Navigator.pop(context);
}
Navigator.pop also takes a context argument and removes the
current route from the stack and returns to the previous route.
 B A S IC N A V IG A T IO N T E C H N IQ U E S

• Navigating with Named Routes

• it's common to use named routes for larger apps to maintain a
clear and organized navigation structure.
• Named routes allow you to specify and navigate to them by
name without creating a new MaterialPageRoute each time.
• MaterialApp(
initialRoute: '/’,
routes: {
'/': (context) => HomeScreen(),
'/second': (context) => SecondScreen(),
},
)
 C O N T
.

• Navigating with Named Routes

• we define two named routes: '/' for the HomeScreen and
'/second' for the SecondScreen.
• The initialRoute property specifies the initial route name to
display when the app is first opened.
• To navigate to a named route,
onPressed: () {
Navigator.pushNamed(context, '/second’);
}

Navigator.pushNamed is used to navigate the '/second' route,

corresponding to the SecondScreen.
The routes property of MaterialApp allows you to define your
named routes in a structured manner.
This can be particularly useful when your app has many screens.
 PASSING DATA BETWEEN SCREENS

• In many Flutter applications, you must pass data between

screens when navigating to a new page.
• Flutter provides mechanisms to send and receive data
efficiently, ensuring your app functions seamlessly
 CONT..

• Sending Data to a New Screen

• To send data to a new page, you can pass the data as arguments
when navigating.
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondScreen(data: 'Hello from
HomeScreen!'),
),
);

we pass the string 'Hello from HomeScreen!' as data to the

SecondScreen by including it in the constructor of SecondScreen.
RECEIVING DATA ON THE DESTINATION PAGE

class SecondScreen extends StatelessWidget {

final String data;
SecondScreen({required this.data});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(data),
),
);
}
}
 WIDGETS

• ListView
• ListView.Builder
• ListView.Seperated
• ListTile
• RadioButtonListTile
• CheckboxListTile
• DropDownButton
• DateTimePickers
• CircleAvatar
• FloatActionButton
 SHARED PREFERENCES

• SharedPreferences in Flutter plays a pivotal role in managing

user preferences and small pieces of data efficiently.
• SharedPreferences is a mechanism for storing key-value
pairs, allowing developers to save data types like strings,
integers, booleans, and double values. This simplicity
makes it ideal for storing user preferences, such as display
settings, application configurations, and login
credentials.
• This data remains intact across app restarts, making it perfect
for scenarios where you need to save user choices or maintain
the state of an app.
 HOW TO SET UP
SHAREDPREFERENCES IN FLUTTER?

• In pubspec.yaml file
dependencies:
shared_preferences: ^latest_version

After adding the dependency, run the following command to get the
package:
flutter pub get
The next step involves initializing SharedPreferences. This is typically done
in the main function or within the initState method of a stateful widget.
The initialization process consists in calling
SharedPreferences.getInstance(), an asynchronous operation.
 BEST PRACTICES

• Avoid storing large amounts of data in SharedPreferences,

which can lead to performance issues.
• Regularly clear SharedPreferences data that is no longer
needed to keep the storage optimized.
• Remember the data type you're storing and retrieving to avoid
runtime errors.
• SharedPreferences, when used wisely, can greatly enhance the
functionality of your Flutter app, making data persistence and
retrieval tasks straightforward and efficient.