Flutter Navigation: Navigating from one screen to another
In this series of articles, we are going to explore how Flutter app navigation works and look at different ways of navigating from one screen to another
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.
In this article, we will explore the simplest way Flutter provides for navigating from one screen to next screen and then back to the previous screen.
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.
Home Page:
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home page'),
),
body: Center(
// Your implementaion
// ...
child: ElevatedButton(
onPressed: () {
// Navigate to detail page.
},
child: const Text('Open Detail Page!'),
),
),
);
}
}Detail Page:
class DetailPage extends StatelessWidget {
const DetailPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Detail page'),
),
body: Center(
// Your implementaion
// ...
child: ElevatedButton(
child: const Text('Go back to Home Page!'),
onPressed: () {
// Navigate back to home page when tapped.
},
),
),
);
}
}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.
// Inside the `HomePage` widget
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const DetailPage()),
);
}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);
}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.
Complete code for HomePage and DetailPage in action looks like this:
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
title: 'Navigating using Navigator.push() and pop() method',
home: HomePage(),
));
}
class HomePageextends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('HomePage'),
),
body: Center(
// Your implementaion
// ...
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const DetailPage()),
);
},
child: const Text('Open Detail Page!'),
),
),
);
}
}
class DetailPage extends StatelessWidget {
const DetailPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('DetailPage'),
),
body: Center(
// Your implementaion
// ...
child: ElevatedButton(
child: const Text('Go back to Home Page!'),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}
This is one way of navigating from one screen to another screen. We will explore other ways of navigating to next screen with custom data in next article which can be found here
Loved this article and want to support me as a writer? Consider throwing a clap 👏 and follow me for more amazing tips and tricks. This will keep me motivated to write more and share it with community.
