How to navigate properly in Flutter Web with Back/Next browser buttons?

user_11865470 0
Viewed 679

I'm currently working with Flutter Web using flutter_modular for the routing which works properly when you navigate straight to a page throught the browser, but I'm encountering a problem when trying to go back and then next again.

Let me explain myself, imagine you are at the home page and you navigate to the register page, then you press the back button from the browser and then you want to press the Next button from the browser, you can't because Flutter disposed the last page and it is not int the browser history anymore.

Is there anyway to achieve a clean and smooth navigation in Flutter Web?

flutter-web dart flutter
1 Answers

I had the same problem recently. I got a solution with Flutter Navigation 2.0. My main problem was,

  • navigation history is gone after browser refresh button clicked
  • after refresh button clicked, back button only works one time
  • browser next button never enabled

These problem all gone after implementing Flutter Navigation 2.0. Below is the simple test code. You can create test project and copy&paste and check your requirement fits.

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

void main() {
  runApp(GetMaterialApp.router(
    debugShowCheckedModeBanner: false,
    defaultTransition: Transition.fade,
    getPages: AppPages.pages,
    routerDelegate: AppRouterDelegate(),
  ));
}

abstract class Routes {
  static const HOME = '/';
  static const LOGIN = '/login';
  static const SIGNUP = '/signup';
}

class AppRouterDelegate extends GetDelegate {
  @override
  Widget build(BuildContext context) {
    return Navigator(
      onPopPage: (route, result) => route.didPop(result),
      pages: currentConfiguration != null
          ? [currentConfiguration!.currentPage!]
          : [GetNavConfig.fromRoute(Routes.HOME)!.currentPage!],
    );
  }
}

abstract class AppPages {
  static final pages = [
    GetPage(
      name: Routes.HOME,
      page: () => Home(),
    ),
    GetPage(
      name: Routes.LOGIN,
      page: () => Login(),
    ),
    GetPage(
      name: Routes.SIGNUP,
      page: () => Signup(),
    ),
  ];
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: TextButton(
        child: Text(
          'Home',
          style: TextStyle(color: Colors.white),
        ),
        onPressed: () => Get.rootDelegate.toNamed(Routes.LOGIN),
      ),
    );
  }
}

class Login extends StatelessWidget {
  const Login({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.orange,
      child: TextButton(
        child: Text(
          'Login',
          style: TextStyle(color: Colors.white),
        ),
        onPressed: () => Get.rootDelegate.toNamed(Routes.SIGNUP),
      ),
    );
  }
}

class Signup extends StatelessWidget {
  const Signup({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: TextButton(
        child: Text(
          'Signup',
          style: TextStyle(color: Colors.white),
        ),
        onPressed: () => Get.rootDelegate.toNamed(Routes.HOME),
      ),
    );
  }
}

I wrote detailed explanation in this blog. I used GetX package but you also can use this practice with MaterialApp.router.

https://dev.to/swimmingkiim/flutter-web-fix-refresh-back-button-problem-4gk3

user_147282540
Related