When it comes to navigation in apps and websites, it's not enough that you just implement the forward navigation. The following article will show how the back navigation in Flutter works and how you can load and pass data while doing it.
This is the last Part of my Series: 🦋Flutter - Next Level Navigation.
If you haven't read the other parts yet, I recommend you to do so.
content
Popping Pages
While navigating through an app or website, it often happens that you also want to navigate back.
This can happen under 3 different conditions:
- by using the native back button on your smartphone.
- by using the back button in the app bar
- by giving this functionality to a button using
Navigator.pop(context);
WillPopScope
In Flutter, there is a widget for almost every application purpose. For both conditions 1 and 2, it is possible to intercept and process the corresponding event onWillPop with the widget WillPopScope. This might look like the following:
class _SecondPageState extends State<SecondPage> {
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: async () {
// do stuff here before Scope pops
},
child: Scaffold(
...
),
);
}
}
The build method of _SecondPageState is extended with the widget WillPopScope at the top. Using the onWillPop property will produce the desired result as soon as the user wants to return to the previous page. Note that the method in onWillPop is called asynchronously.
pop context
As an alternative to the WillPopScope widget, it is also possible to switch to the previous page programmatically. This is usually done by a button click. An example is given below:
TextButton(
onPressed: () {
// do stuff here before navigation
Navigator.of(context).pop();
},
child: Text('To previous page'),
),
The onPressed function handles the button click. Before calling Navigator.of(context).pop(); optional optional tasks can be done as well.
pop and then
In the two examples above, you can only do tasks from the second page before navigating back. Below I want to show you a way to perform operations in the previous class after navigating back.
If you execute one of the functions introduced in the post Flutter - Next Level Navigation, such as .pushNamed(), the function .then() can be executed on this operator afterwards. In this function, operations can be performed which are only executed after navigating towards and back again. A concrete example looks like the following:
Navigator.pushNamed(context, '/page2').then((value) {
// do stuff in here
setState(() {
// update Data in here to be displayed on Page1
});
});
Passing data
You probably wondered what the variable value in the previous example is passing. Quite simple: You can of course pass data from the second page back to the previous one. This can be done by passing another object besides the context when calling the .pop() function. The object can be achieved either as a return value of the function call .pushNamed() (or a similar one) or through the .then() function as a passed variable.
The example looks like this:
Auf der ersten Seite beim hin navigieren:
final result = Navigator.pushNamed(context, '/page2').then((value) {
setState(() {
// display return value
});
});
&& On the second page when navigating back
ElevatedButton(
onPressed: () {
Navigator.pop(context, 'Nope.');
},
child: Text('Nope.'),
),
Closing words
I hope this four-part blog post series showed you how to navigate smoothly and efficiently in Flutter. I thank you for reading and look forward to feedback on the content, suggestions for new content and other interesting conversations.
What are your experiences with Flutter & Navigation?
Comment on this post and share your experience!
Follow me to not miss any following posts
See my latest Projects on Github or at Lucianojung.de
Top comments (0)