Question 359940 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Navigation back not working good from browser back button

I noticed that navigation in my Flutter Web app not working well if I’m using back button from browser.

For example:

  1. Go from home page to first page
  2. Go from first page to second page
  3. Coming back to the first page
  4. I cannot back to home page, until I click on any place on screen.

It only happens in Flutter Web. In Android app it’s working fine

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),


      title: 'Genistree',

    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Container(
        color: Colors.yellowAccent,
        child: ElevatedButton(onPressed: () {
         // Get.to(FirstPage());

          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => FirstPage(),
            ),
          );


        }, child: Text("Go to 1st page"),

        ),),

    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {


    return Scaffold(
      body: Container(
        color: Colors.blue,
        child: ElevatedButton(onPressed: () {

         // Get.to(SecondPage());
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => SecondPage(),
            ),
          );

        }, child: Text("Go to 2st page"),

        ),),);
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Container(
        color: Colors.red,

      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    This issue might be related to the way Flutter handles routing and navigation on the web. You can try using WillPopScope widget to handle back button behavior explicitly in your Flutter web app.

    Login or Signup to reply.
  2. 0

    I tried a bunch of solutions, but nothing worked for me except this one.
    It remembers the stack’s navigation.

    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 homePage = '/';
  static const firstPage = '/firstPage';
  static const secondPage = '/secondPage';
}

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.homePage)!.currentPage!],
    );
  }
}

abstract class AppPages {
  static final pages = [
    GetPage(
      name: Routes.homePage,
      page: () => const HomePage(),
    ),
    GetPage(
      name: Routes.firstPage,
      page: () => const FirstPage(),
    ),
    GetPage(
      name: Routes.secondPage,
      page: () => const SecondPage(),
    ),
  ];
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.yellowAccent,
        child: ElevatedButton(
          onPressed: () => Get.rootDelegate.toNamed(Routes.firstPage),
          child: const Text("Go to 1st page"),
        ),
      ),
    );
  }
}

class FirstPage extends StatelessWidget {
  const FirstPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.blue,
        child: ElevatedButton(
          onPressed: () => Get.rootDelegate.toNamed(Routes.secondPage),
          child: const Text("Go to 2st page"),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.red,
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search