Scribd
Upload
49 views11 pages

Chapter 5

The document discusses navigating between screens in a mobile application. It explains that navigation allows users to traverse between different screens or pages in an app. It describes how the Navigator widget in Flutter is used to navigate between a home page and detail page when buttons are tapped, and how the Navigator pop method navigates back to the previous screen.

Uploaded by

developerdawit1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
49 views11 pages

Chapter 5

The document discusses navigating between screens in a mobile application. It explains that navigation allows users to traverse between different screens or pages in an app. It describes how the Navigator widget in Flutter is used to navigate between a home page and detail page when buttons are tapped, and how the Navigator pop method navigates back to the previous screen.

Uploaded by

developerdawit1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Bahir Dar University-BiT-Faculty of Computing

Course Name:-Mobile Application


Development
Chapter 3: Navigation and Routing
compiled by Samuel. Ashagrre

MOBILE APPLICATION DEVELOPMENT 1


Navigating Between Screens
Navigation is an essential aspect of human existence, allowing us to explore
and traverse the world around us. So does it meant for any mobile app where
user have to navigate from one screen to another.
Mobile apps usually reveal its contents through full-screen elements known
as screens or pages. For instance, in E-commerce app, HomePage screen
might display different products and tapping on any of the products shows
DetailPage screen of specific product.
 In Flutter, we have a route (Navigator) widget which is equivalent to
Activity in Android and ViewController in IOS.

MOBILE APPLICATION DEVELOPMENT 2


Navigating Between Screens
 Home Page appBar: AppBar(
title: const Text('Home page'),
class HomePage extends StatelessWidget { ),
body: Center(
const HomePage({super.key}); // Your implementaion
// ...
child: ElevatedButton(
@override onPressed: () {
// Navigate to detail page.
Widget build(BuildContext context) { },
child: const Text('Open Detail Page!'),
return Scaffold( ),
),
);
}
}

MOBILE APPLICATION DEVELOPMENT 3


Navigating Between Screens
 Detail Page body: Center(
class DetailPage extends StatelessWidget { // Your implementaion
// ...
const DetailPage({super.key}); child: ElevatedButton(
child: const Text('Go back to Home Page!'),
onPressed: () {
@override // Navigate back to home page when tapped.
Widget build(BuildContext context) { },
),
return Scaffold( ),
appBar: AppBar( );
}
title: const Text('Detail page'), }
),

MOBILE APPLICATION DEVELOPMENT 4


Navigating Between Screens
Navigate to Detail Screen
To navigate from HomePage screen to DetailPage screen, use the
Navigator.push() method. This push() method allows us to adds a
Route in stack of routes managed by the Navigator. One way of
navigating to other screen is MaterialPageRoute, which is useful
because it transitions to the new route using a platform-specific
animation.

MOBILE APPLICATION DEVELOPMENT 5


Navigating Between Screens
Navigate to Detail Screen
// Inside the `HomePage` widget
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const DetailPage()),
);
}

MOBILE APPLICATION DEVELOPMENT 6


Navigate back to Home Screen
To navigate back to previous screen, use the Navigator.pop()
method. This pop() method removes the current route from the stack
of routes managed by Navigator.
// Inside the DetailPage widget
onPressed: () {
Navigator.pop(context);
}

MOBILE APPLICATION DEVELOPMENT 7


Navigate back to Home Screen
 In Android, the system UI will provide a back button at the bottom
of device which allows user to navigate back to previous screen in
your application’s stack.
On platform that don’t have this build-in navigation mechanism,
the use of an AppBar (typically used in the Scaffold.appBar property)
can automatically add a back button for user navigation.

MOBILE APPLICATION DEVELOPMENT 8


Navigate back to Home Screen

MOBILE APPLICATION DEVELOPMENT 9


Note
 look back at chapter 3 about Implementing Navigation Patterns

MOBILE APPLICATION DEVELOPMENT 10


To be
continued on
the next slide,
Thank you

MOBILE APPLICATION DEVELOPMENT 11

You might also like