Is There Any Way Intercept 'Back' Keydown In Flutter App On Android?

I need to show an alert dialog before user navigates away from current route by pressing Back button on Android devices. I tried to intercept back button behavior by implementing W

Solution 1:

I found the solution is to use WillPopScope widget. Here is the final code below:

import 'dart:async';

import 'package:flutter/material.dart';

class NewEntry extends StatefulWidget {
  NewEntry({Key key, this.title}) :super(key: key);

  final String title;

  @override
  State<StatefulWidget> createState() => new _NewEntryState();
}

class _NewEntryState extends State<NewEntry> {

  Future<bool> _onWillPop() {
    return showDialog(
      context: context,
      child: new AlertDialog(
        title: new Text('Are you sure?'),
        content: new Text('Unsaved data will be lost.'),
        actions: <Widget>[
          new FlatButton(
            onPressed: () => Navigator.of(context).pop(false),
            child: new Text('No'),
          ),
          new FlatButton(
            onPressed: () => Navigator.of(context).pop(true),
            child: new Text('Yes'),
          ),
        ],
      ),
    ) ?? false;
  }

  @override
  Widget build(BuildContext context) {
    return new WillPopScope(
      onWillPop: _onWillPop,
      child: new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        floatingActionButton: new FloatingActionButton(
          child: new Icon(Icons.edit),
          onPressed: () {},
        ),
      ),
    );
  }
}

Solution 2:

The back_button_interceptor package can simplify this for you and is especially useful in more complex scenarios.

https://pub.dev/packages/back_button_interceptor#-readme-tab-

Example usage:

@override
void initState() {
   super.initState();
   BackButtonInterceptor.add(myInterceptor);
}

@override
void dispose() {
   BackButtonInterceptor.remove(myInterceptor);
   super.dispose();
}

bool myInterceptor(bool stopDefaultButtonEvent) {
   print("BACK BUTTON!"); // Do some stuff.
   return true;
}

Solution 3:

If you are using the GetX package and you implemented the GetMaterialApp method to initialize your app, the didPopRoute and didPushRoute methods in WidgetsBindingObserver never get called. Use the routingCallback instead, below is an example, for more info check out GetX documentation:

GetMaterialApp(
  routingCallback: (routing) {
    routing.isBack ? didPopRoute() : didPushRoute(routing.current);
  }
)