First of all we need to understand how we go back in flutter. Once we understand the pattern of going back then we will figure out the solution.

Demo #

In this demo when you will go to second page and come back you will find that the data is updated. In this article We will learn and understand how it’s happening. How the data get updated when we come back to previous page.

How go back works? #

There is a navigator in the flutter which is stack and there we store the routes. Navigator is of type Stack data Structure.

• Current page is the top most item of the Navigator.
• To move to the next page we push route to the navigator.
• To move back page to previous page, we pop route from the navigator.

I know most of you know about the Navigator and it’s working. It’s important for this article that you understand fundamental of Navigation(if you don’t know).

There are 3 ways to go back

• By pressing Native Back Button on your phone
• By press the Back Button on app bar
• By programmatically, I mean by calling Navigator.pop(context);

When you go back using any of the above method then it will do Navigator.pop(context) under the hood.

Real use cases #

• In news app, We get list of news and we open one news. When we come back to news list again. We want list to be updated because news data updates very frequently.
• When you want to send data to the previous page from current page.
• When we close the modal popup.

Get Started #

I’ll create project from the beginning so that it will be easy for everyone to follow this. I will build a simple app to demonstrate the page refresh when we come back to the screen.

I will try to make it as simple as possible by doing the least things as possible. This will give you fundamental logic and once you got the fundamental clear then you are ready to apply wherever required.

Prerequisites #

You must understand all these concepts in order ot build the

• Stateful
• Stateless
• Navigator
• Future

Step 1 #

I don’t think you need any kind of explanation for this code because it’s the building block of flutter. You really need to understand this in order to follow the tutorial.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Refresh on Go Back',
      home: HomePage(),
    );
  }
}

Step 2 #

This is our home and we want that when we come back to this page from other page, this page should get refresh. To confirm if the page has been update or not we are using stateful which will help us in re-rendering UI.

home.dart

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int id = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(
              'Data: $id',
              style: Theme.of(context).textTheme.headline5,
            ),
            RaisedButton(
              child: Text('Second Page'),
              onPressed: navigateSecondPage,
            ),
          ],
        ),
      ),
    );
  }
  void navigateSecondPage(){  }
}

Step 3 #

Let’s make a second page from there we will come back to the home page. We want that going back from this page should refresh the homepage.

second.dart

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

I have added Navigator.pop(context); this line of code which will being us back to the previous page.

Now we want to refresh the page whenever we go back to the previous page(home). So for that we need to do some additional work in the previous page(home).

Step 4 #

In this step we will write all the logic which will be responsible for updating the state on go back. I will try to split the code in smaller part which will make easier for you to understand the code.

then keyword is used with future and it register callbacks to be called when the future get completed. Here when we come back to the page then the future get completed.

We will define three methods in main.dart file.

• navigateSecondPage : This will navigate us to the SecondPage. It also call the onGoBack method, which will refresh the data and update the state.
• onGoBack : This will be called when we come back to the current page (home). We are doing two things here
  • refreshing of data by calling refreshData
  • setState to update the state of app.
• refreshData : This will refresh the data of the page. We are increasing the count of id variable and it’s updating of state.

main.dart

  void refreshData() {
    id++;
  }

  FutureOr onGoBack(dynamic value) {
    refreshData();
    setState(() {});
  }

  void navigateSecondPage() {
    Route route = MaterialPageRoute(builder: (context) => SecondPage());
    Navigator.push(context, route).then(onGoBack);
  }

When you push a route to the Navigation a Futures starts and it get completed when you remove that route from the Navigation. On completion of that future it calls the registered callback.

It’s not required to register callback all the time and I know some of you have never used the call back with the navigator. It’s totally fine and if you don’t require it then ignore the callback.

This is the simplest demo which I could make for you.

Conclusion #

In this article you have learnt that navigation promise doesn’t get completed until and unless you remove that from the Navigator.

Once the promise get completed it called the registered callback which we specified in then. It’s optional to add callback and you don’t need to callback everywhere.

You can send the data back from the current route also. But I don’t wanted to make it length and confusing so I leaving it here. Someday I will write another article continuing from here and explaining sending data back to previous page.

If you like it don’t forget to tweet about it @Tweet this article. I hope it was a good read for you and you learn something new.