Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to intercept back button in AppBar in flutter

I am using interceptor https://pub.dartlang.org/packages/back_button_interceptor to execute a method when the page 1 is back from page 2.

If I come back from page 2 to page 1 using device back button, the method is executed.

But if I come back from page 2 to page 1 using the arrow button at appBar I am not able to execute the method.

How can the back arrow button functionality default to the device back button?

like image 930
ningomba 2.0 Avatar asked Mar 03 '19 18:03

ningomba 2.0


People also ask

How do I get the back button in AppBar Flutter?

To add custom back button in Flutter AppBar You Just need to Use Leading in AppBar and Use IconButton for leading Just like this. To add custom back button in Flutter AppBar You Just need to Use Leading in AppBar and Use IconButton for leading Just like this.

How do I add back button with text in AppBar Flutter?

You have to use the iconTheme property from the AppBar , like this: appBar: AppBar( iconTheme: IconThemeData( color: Colors. black, //change your color here ), title: Text("Sample"), centerTitle: true, ), Or if you want to handle the back button by yourself.

How do you handle the back button on a Flutter?

To override the back button in Flutter and show the confirmation dialog, you can use the same WillPopScope widget. Whenever you get the back button pressed callback, show the alert dialog asking for exit confirmation.

How do I add buttons to AppBar Flutter?

How to create button on the left in Appbar [flutter] If I understand correctly, you want to add a left button to your AppBar. You can achieve that by using the leading property, like this: AppBar ( title: Text ("AppBar with leading button"), automaticallyImplyLeading: false, leading: IconButton ( icon: Icon (Icons.


2 Answers

You can surround your scaffold on Page 2 with WillPopScope, set onWillPop to false to prevent the page from being popped by the system and then add your own back button into the app bar's leading widget and perform your pop in there.

@override
Widget build(BuildContext context) {
  return new WillPopScope(
    onWillPop: () async => false,
    child: new Scaffold(
      appBar: new AppBar(
        title: new Text("data"),
        leading: new IconButton(
          icon: new Icon(Icons.ac_unit),
          onPressed: () => Navigator.of(context).pop(),
        ),
      ),
    ),
  );
}

code for the answer from this post

Edit: Addition to Page 2 to control navigation

In addition to the above code you'll add the below code to page 2. Change

Navigator.of(context).pop() 

to

Navigator.of(context).pop('upload_files')

Then in your page 1 where you navigate you'll await the navigation and use the result returned from the pop on page 2 and run your logic

var navigationResult = await Navigator.push(
        context,
        new MaterialPageRoute(
            builder: (context) => Page2()));


 if(navigationResult == 'upload_files') {
    uploadFiles(); // Perform your custom functionality here.
 }
like image 104
Filled Stacks Avatar answered Oct 14 '22 11:10

Filled Stacks


The default back button in AppBar is BackButton widget from material.dart. You may create it manually and pass your own onPressed to do what you want:

return Scaffold(
  appBar: AppBar(
    leading: BackButton(onPressed: _onBackPressed),
    title: Text('Title'),
  ),
  body: Container(),
);

If you do not specify leading in AppBar, then it creates a BackButton with the handler that does Navigator.maybePop(context).

like image 24
Alexey Inkin Avatar answered Oct 14 '22 13:10

Alexey Inkin