How to know when user has tapped the back button or back navigation arrow in Flutter

A common Android UI pattern for edit screens is to ask the user to confirm that they want to discard their changes when they tap the back button or back navigation arrow. So, how do you catch this user event in Flutter?

Well, after a fair amount of trial and error, the solution turned out to be quite simple, using a WillPopScope.

Set up an app with a list screen and an edit screen

In this code tutorial, we will create an app with 2 screens. The home screen shows a list of items. The second screen, accessed when tapping an item in the list, allows the user to edit the item title. This screen has a confirm icon in the top right of the app bar, and a back arrow navigation in the top left. If the user has edited the item title, a confirmation dialog asking the user to confirm they want to abandon their changes is shown.

To follow the code tutorial, create a new app as follows.

If you’re unsure how to set up a Flutter app, check out Getting started with Flutter official tutorial.

Firstly, we create a Material app in main.dart, which will launch the ListPage widget.

 

Secondly, we create a subpackage list and create list_page.dart in it. It displays a simple list using ListTile. Tapping on a list item opens EditPage.

Note: the items are simply stored in the stateful widget, but for a real app, you should pay attention to your app architecture and separate your concerns (for specific Flutter examples, check out MVP or Flux ).

 

Thirdly, we create a subpackage edit and create edit_page.dart in it. It displays EditPage, which contains a TextField with the list item title.

 

Now, we have an edit screen that does absolutely nothing when the user changes the data in the field. Let’s add some logic to it!

Show confirm icon in toolbar only if user has changed the title

On the edit screen, let’s show a confirm icon if, and only if, the user has made some changes to the title. For this, we track the edited title. Let’s amend edit_page.dart as below.

Now, when the user taps the confirm icon, _save() is called. Let’s implement this to pop the screen and pass back the title to ListPage.  So we edit  _save() in edit_page.dart.

And now, we amend _showItem in list_page.dart.

 

Add WillPopScope to catch ‘pop’ event

But what about the back button and back navigation arrow? We need to know when the user has tapped them, because if the title has changed, we want to ask the user to confirm they want to discard their changes. To catch this user event, we will add a WillPopScope to EditPage as below.

Now, when the user tap either the device back button or the left arrow in the app bar, the method _requestPop() is fired. Let’s implement it. It will show a dialog if, and only if, the user has made some changes to the title.

Voila!

Screencast
Screencast

What next?

Can you write an integration test to verify the edited item title is shown properly in the list? Read How to write an integration test in Flutter.

 
 

Enjoyed this code tutorial? Support the blog!


Support options



 

Android app developer with 8 years experience, ranging from start ups to large tech (Google) and non tech (British Airways) companies. Currently freelancing and learning Flutter. LinkedIn natalie ( at ) cogitas (dot) net

Author: Natalie Masse Hooper

Android app developer with 8 years experience, ranging from start ups to large tech (Google) and non tech (British Airways) companies. Currently freelancing and learning Flutter. LinkedIn natalie ( at ) cogitas (dot) net

3 thoughts on “How to know when user has tapped the back button or back navigation arrow in Flutter”

  1. Thanks for this great article. Articles like this that provide a complete way to solve a more common patterns in building app and situations is best articles for beginners in new frameworks. Provide more examples how to solve a general practical tasks in flutter! We will read it with enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *