How to handle "previous/back" button when displaying a dialog with flutter web

Question

When i display a modal dialog in Flutter Web, i would like to make the back button close the current dialog instead of go back to the previous route. After some search, i found PopScope but i can't make it working: the method onPopInvokedWithResult is called only when i click "Close" button in the modal, when i click "Previous" the browser goes back to page one.

Of course i tried setting canPop to true/false: the behavior is the same. I tried with WillPopScope or onPopInvoked (both are deprecated) but it didn't work.

I use go_router in version 14.6.3

I join a minimal reproduction case:

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

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

  final GoRouter _router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const Page1(),
      ),
      GoRoute(
        path: '/page2',
        builder: (context, state) => const Page2(),
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}

class Page1 extends StatelessWidget {
  const Page1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 1')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            context.go('/page2');
          },
          child: const Text('goto Page 2'),
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  const Page2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 2')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return PopScope(
                  canPop: true,
                  onPopInvokedWithResult: (didPop, result) {
                    //Section called only after i click Close button
                    print('onPopInvokedWithResult');
                    print('$didPop');
                    //perform some Navigator.of(context).pop();
                  },
                  child: AlertDialog(
                    title: const Text('Dialog'),
                    content: const Text('Dialog content'),
                    actions: [
                      TextButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                          print('Close button clicked');
                        },
                        child: const Text('Close'),
                      ),
                    ],
                  ),
                );
              },
            );
          },
          child: const Text('Open dialog'),
        ),
      ),
    );
  }
}

You may be able to use redirects, since back button just changes the url you could have some state that denotes that the dialog is currently visible and redirect would not allow them In this case you also cant just use showDialog so the dialog needs to be handled as a route in GoRouter as well this may help: stackoverflow.com/questions/75690299/… — ahmetakil
– ahmetakil, Commented Jan 17 at 12:07
Instead of calling show dialog function you can try pushing a dialog route through the flutter basic navigator, I know this sounds counterintuitive after using go_router to avoid navigator but this can achieve the effect you need. — sushant sangle
– sushant sangle, Commented Jan 17 at 15:34

Csaba Mihaly · Accepted Answer · 2025-01-17 16:08:56Z

As far as I can tell you can't really control, trigger or stop the browser back button funcionality.

Found two solutions.

One solution is to add an extra page, this could be anything not just page 2, with the dialog if you really want to use the browser's back button, but you will end up with two Page 2 in the navigation history.

import 'package:flutter/material.dart';

import 'package:go_router/go_router.dart';

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

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

  final GoRouter _router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const Page1(),
      ),
      GoRoute(
        path: '/page2',
        builder: (context, state) => const Page2(),
      ),
      GoRoute(
        path: "/page2/dialog",
        builder: (context, state) => Page2(
          dialog: true,
        ),
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}

class Page1 extends StatelessWidget {
  const Page1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 1')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            context.go('/page2');
          },
          child: const Text('goto Page 2'),
        ),
      ),
    );
  }
}

class Page2 extends StatefulWidget {
  const Page2({super.key, this.dialog = false});

  final bool dialog;

  @override
  State<Page2> createState() => _Page2State();
}

class _Page2State extends State<Page2> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (widget.dialog) _showAlert(context);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 2')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            context.push('/page2/dialog');
            //context.pop;
          },
          child: const Text('Open dialog'),
        ),
      ),
    );
  }

  _showAlert(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Dialog'),
          content: const Text('Dialog content'),
          actions: [
            TextButton(
              onPressed: () {
                context.pop();
              },
              child: const Text('Close'),
            ),
          ],
        );
      },
    );
  }
}

The other solution is to use routerNeglect: true and context.push. This doesn't update the browser history, basically disables browser button navigation. If you want to put a page in the navigation history use context.go. I would use this.

import 'package:flutter/material.dart';

import 'package:go_router/go_router.dart';

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

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

  final GoRouter _router = GoRouter(
    routerNeglect: true,
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const Page1(),
      ),
      GoRoute(
        path: '/page2',
        builder: (context, state) => const Page2(),
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}

class Page1 extends StatelessWidget {
  const Page1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 1')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            context.push('/page2');
          },
          child: const Text('goto Page 2'),
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  const Page2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 2')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  title: const Text('Dialog'),
                  content: const Text('Dialog content'),
                  actions: [
                    TextButton(
                      onPressed: () {
                        context.pop();
                      },
                      child: const Text('Close'),
                    ),
                  ],
                );
              },
            );
          },
          child: const Text('Open dialog'),
        ),
      ),
    );
  }
}

Collectives™ on Stack Overflow

How to handle "previous/back" button when displaying a dialog with flutter web

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related