HANDLING USER
INPUT AND
NAVIGATION
I CT425 MOBILE APPLICATION DEVELOPMENT
PRASHAYA FUSI RIPONG (PH.D.)
1. Handling buttons for user input
2. Basic Navigation: pushing and
OUTLINE popping routes
3. Navigation widgets: Drawer and
Tab
HANDLING BUTTONS FOR USER INPUT
• Buttons are material components that provide the user a single tap facility for taking
actions, making choices, submitting forms, saving data, opening a new page, etc
• Buttons are triggered when the user taps on them
• Special features of a button:
Easy addition of different child widgets for different purposes
Easy theming of the button
Easy addition of themed text and icons
Provide action functionalities
• Types of buttons
TextButton
ElevatedButton
OutlinedButton
IconButton
TEXTBUTTON WIDGET
• Text Button Class in flutter are material component button widgets with no border by default
• Text button is a regular button with some text written as the label
• Parameters must be required:
child: button’s label
For example:
child: const Text(“Text Button”),
onPressed: the action to be performed on pressing the button
onPressed: (){
setState(() {
_txtclick = "Text Button is clicked...";
});
}
Noted: onPressed event can handle calling the new screen in flutter app
ELEVATEDBUTTON WIDGET
• Elevated Button hold is the slight elevation in their surface towards the screen on getting
tapped by the user
• Parameters must be required:
child: button’s label
For example:
child: const Text(“Elevated Button”),
onPressed: the action to be performed on pressing the button
onPressed: (){
setState(() {
_txtclick = “Elevated Button is clicked...";
});
}
OUTLINEDBUTTON WIDGET
• Outlined button widgets is in no way different from text buttons except for the
special feature of the border this class provides
• Parameters must be required:
child: button’s label
For example:
child: const Text(“Elevated Button”),
onPressed: the action to be performed on pressing the button
onPressed: (){
setState(() {
_txtclick = “Elevated Button is clicked...";
});
}
ICONBUTTON WIDGET
• Icon button is the button having an icon, and presses it does something
• Parameters must be required:
icon: button’s icon
For example:
icon: const Icon(Icons.volumn_up),
onPressed: the action to be performed on pressing the button
onPressed: (){
setState(() {
_volume += 10;
});
}
NAVIGATION AND ROUTING
• All apps have the concept of moving from one screen to another.
• The flutter have four ways of navigating:
Stacks: user taps a button to go through a predefined workflow
History is maintained, and they can travel back one level by hitting a back button
Drawers: Most of the screen shows a widget, but on the left edge
A drawer is peeking out at the user, if pressing one changes the widget in the main part
of screen
Tabs: Some room is reserved for a set of tabs at the top / the bottom of the screen.
User press on a tab, app will show the widget that corresponds to that tab
Dialogs: a model (pop-up windows) that stay until the user dismisses them
STACK NAVIGATION
• Stack navigation is a familiar with queues and
stacks
• With Flutter’s stack, app will typically predefine
the scenes as routes and give each a name.
Examples:
NAVIGATION AND ROUTING
• In any application, navigation from one page / screen to another defines the
work flow of the application
• The way that the navigation of an application is handled is called ‘Routing’
• Flutter provides a basic routing class – ‘MaterialPageRoute’
• There are two methods as
Navigator.push
Navigator.pop
They are to define the work flow of an application
Noted: Does not use a predefined routing table in the ‘MaterialApp’
It is popular and custom transitions
NAVIGATION AND ROUTING
• MaterialPageRoute – This defines the transition to a new screen
(route). It wraps the new widget in a page route (widget used to
render its UI by replacing the entire screen)
MaterialPageRouter(builder: (context) => Widget())
• Here, builder will accepts a function to build its content by
suppling the current context of the application
NAVIGATION AND ROUTING
• Navigation.push – is used to transition from the first screen to the second screen
Navigator.push(context, MaterialPageRoute(builder: (context) => Widget()), );
• Navigation.pop – is used to go back to the previous (first) screen
Navigator.push (context)
PUSHING A NEW ROUTE
• In Flutter, you can push a
new screen onto the
navigation stack using
‘Navigator.push’.
• When you push a new route,
the current screen is kept in
memory, and the new
screen is displayed on top of
it.
PASSING DATA BETWEEN
SCREENS
• In many scenarios, you
will need to pass data
between screens. Flutter
allow you to pass
arguments to routes
when navigating using
both ‘Navigator.push’
and name routes.
DRAWER NAVIGATION
• Drawer widget is used to provide access to different
destinations and functionalities.
• Drawer is represented by three horizontal parallel lines on the
upper end of the scaffold.
• The navigating AppDrawer is divided into three sections
namely header, body, and footer
• The drawer’s child will be navigated to different destination
on getting tapped
All children of a Drawer widget are usually in ‘ListView’ and
initially
DrawerHeader is present in the UI which when tapped extends
horizontally
DRAWER NAVIGATION
TAB NAVIGATION
• Tabs is a part of the UI that navigates the
user through different routes (i.e. pages)
when clicked upon
• Flutter provides a simple way to create
tab layout using the material library
• The concept of tabs and their
functionality in a Flutter app by following
the below steps:
Design a TabController
Add tabs to the app
Add content in each tab.
TAB NAVIGATION
• Design a TabController
The TabController as the name suggests controls
the functioning of each tab by syncing the tabs
and the contents with each other
The DefaultTabController widget is one of the
simplest ways to create tabs in flutter
DefaultTabController(
// total 5 tabs
length: 5,
child:
);
TAB NAVIGATION
• Adding tabs
A tab in Flutter can be created using a ‘TabBar’
widget
home: DefaultTabController(
length: 5,
child: Scaffold(
appBar: AppBar(
bottom: const TabBar(
tabs: [
Tab(icon: Icon(Icons.music_note)),
Tab(icon: Icon(Icons.music_video)),
Tab(icon: Icon(Icons.camera_alt)),
Tab(icon: Icon(Icons.grade)),
Tab(icon: Icon(Icons.email)),
],
), //TabBar
TAB NAVIGATION
• Adding content to tabs
The ‘TabBarView’ widget can be used to specify
the contents of each tab
body: const TabBarView(
children: [
Icon(Icons.music_note),
Icon(Icons.music_video),
Icon(Icons.camera_alt),
Icon(Icons.grade),
Icon(Icons.email),
],
), // TabBarView
Thank you
Prashaya Fusiripong (Ph.D.)
Email: prashaya.f@rsu.ac.th
Department of Information and communication technology (ICT), International college
