How to prevent the Android back button to exit the application?

[buchen]

Hi,

I want to implement the following behavior in my Flutter application:

If the users presses the Android back button or uses the back gesture, then

• if there is more than one page on navigation stack, it should pop the page (= go back inside the application)
• if the user has enabled the predictive back gesture, then Android system animation should be shown
• otherwise, the application should show an "exit dialog" to ask the user to confirm exiting the application

How can I implement this behavior with AutoRoute?

---

About the predictive back gesture: My understanding is that in Android 14

1. it requires the flag android:enableOnBackInvokedCallback="true" in the manifest and
2. it requires the user to manually activate the predictive back in the settings (apparently it planned to make this default in Android 15).

However, the application can't seem to detect whether the user has enabled predictive back. And if the flag is set, then the application does close immediately regardless (no callback). Plus: only a few users use this feature already. Therefore my thinking is to use an "exit dialog" for the time being.

---

One implementation I tried is using WillPopScope around in my root scaffold.

This is the gist:

@RoutePage()
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: const AutoLeadingButton(),
        title: const Text('Home Screen'),
      ),
      drawerEnableOpenDragGesture: false,
      drawer: Drawer(
        child: TextButton(
          onPressed: () => Navigator.of(context).pop(),
          child: const Text('Back'),
        ),
      ),
      body: WillPopScope(                                     // <======= WillPopScope
        onWillPop: () {
          return _confirmAppExit(context);                    // <======= ask user to confirm
        },
        child: Center(
          child: TextButton(
            child: const Text('Navigate to Detail'),
            onPressed: () {
              AutoRouter.of(context).push(DetailRoute(id: 'first'));
            },
          ),
        ),
      ),
    );
  }

  Future<bool> _confirmAppExit(BuildContext context) async {
     // show dialog to user to confirm exit
  }
}

Full code sample

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';

part 'main.gr.dart';

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

class MyApp extends StatelessWidget {
  MyApp({super.key});

  final _appRouter = AppRouter();

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _appRouter.config(),
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.amber),
      ),
    );
  }
}

@AutoRouterConfig(replaceInRouteName: 'Screen,Route')
class AppRouter extends _$AppRouter {
  @override
  List<AutoRoute> get routes => [
        AutoRoute(page: HomeRoute.page, path: '/'),
        AutoRoute(page: DetailRoute.page),
      ];
}

@RoutePage()
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: const AutoLeadingButton(),
        title: const Text('Home Screen'),
      ),
      drawerEnableOpenDragGesture: false,
      drawer: Drawer(
        child: TextButton(
          onPressed: () => Navigator.of(context).pop(),
          child: const Text('Back'),
        ),
      ),
      body: WillPopScope(
        onWillPop: () {
          return _confirmAppExit(context);
        },
        child: Center(
          child: TextButton(
            child: const Text('Navigate to Detail'),
            onPressed: () {
              AutoRouter.of(context).push(DetailRoute(id: 'first'));
            },
          ),
        ),
      ),
    );
  }

  Future<bool> _confirmAppExit(BuildContext context) async {
    final result = await showDialog<bool>(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: const Text('Exit App'),
            content: const Text('Are you sure you want to exit the app?'),
            actions: [
              TextButton(
                child: const Text('Cancel'),
                onPressed: () => Navigator.pop(context, false),
              ),
              TextButton(
                child: const Text('Confirm'),
                onPressed: () => Navigator.pop(context, true),
              ),
            ],
          );
        });

    return result ?? false;
  }
}

@RoutePage()
class DetailScreen extends StatelessWidget {
  const DetailScreen({required this.id, super.key});

  final String id;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: const AutoLeadingButton(),
        title: Text('Detail Screen $id'),
      ),
      body: Center(
        child: TextButton(
          child: const Text('Navigate to new Detail'),
          onPressed: () {
            AutoRouter.of(context).push(DetailRoute(id: '$id*'));
          },
        ),
      ),
    );
  }
}

That works only partially.

• If the user is one the HomeScreen and presses the back button, the dialog asks the user to confirm the exit of the application.
• However, if a user attempts to close the drawer with the back button/gesture, then the dialog is also shown but only applies to drawer. That means, the user now confirms whether to close the drawer.

[buchen]

For those who come across this post.

I ended up tracking the state of the drawer and, if the drawer is open, not ask the confirmation question.

class HomeScreenState extends State<ClientScaffold> {

  bool _isDrawerOpen = false;

  @override
  Widget build(BuildContext context) {

    return WillPopScope(
      onWillPop: () => _handleAndroidBackButton(context),
      child: Scaffold(
        ...
        onDrawerChanged: (isOpened) => _isDrawerOpen = isOpened,
      ),
    );
  }

  Future<bool> _handleAndroidBackButton(BuildContext context) async {
    if (_isDrawerOpen) return true;

    ...
  }
}