Scribd
Upload
2 views

Chapter 06 Handling user input and navigation

The document provides an overview of handling user input and navigation in mobile application development using Flutter. It covers various button types, their functionalities, and how to implement navigation through stacks, drawers, and tabs. Additionally, it explains how to pass data between screens and create tab layouts using the material library.

Uploaded by

hsusandi.b65
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Chapter 06 Handling user input and navigation

The document provides an overview of handling user input and navigation in mobile application development using Flutter. It covers various button types, their functionalities, and how to implement navigation through stacks, drawers, and tabs. Additionally, it explains how to pass data between screens and create tab layouts using the material library.

Uploaded by

hsusandi.b65
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

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

You might also like