🦋Flutter - Next Level Navigation - Popping
Tags: dart, flutter, productivity, programming
Published: 2021-04-20 06:31:31

> 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](https://dev.to/lucianojung/series/12052) yet, I recommend you to do so.

## content
<ul>
    <li><a href="#popping-pages">Popping Pages</a></li>
    <ul>
      <li><a href="#willpopscope">WillPopScope</a></li>
      <li><a href="#pop-context">Pop context</a></li>
      <li><a href="#pop-and-then">Pop and then</a></li>
    </ul>
    <li><a href="#passing-data">Passing Data</a></li>
</ul>

## 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:

1. by using the native back button on your smartphone.
2. by using the back button in the app bar
3. 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:

``` dart
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:

``` dart
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](https://dev.to/lucianojung/flutter-next-level-navigation-nh4), 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:

``` dart
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:
``` dart
final result = Navigator.pushNamed(context, '/page2').then((value) {
  setState(() {
    // display return value
  });
});
```
&& On the second page when navigating back
``` dart
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!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0wtpvq02mzobtz4lx46j.png)
[Follow me](https://dev.to/lucianojung) to not miss any following posts
See my latest Projects on [Github](https://github.com/login?return_to=%2Flucianojung) or at [Lucianojung.de](https://lucianojung.de/#work)

-----
#### You may also like:

{% link https://dev.to/lucianojung/global-variable-access-in-flutter-3ijm %}

{% link https://dev.to/lucianojung/flutter-next-level-navigation-nh4 %}

{% link https://dev.to/lucianojung/flutter-singelton-pattern-1a38 %}