Flutter Auto Route Back Button Goes to Home Page Instead of Previous Page on Web

Question

I'm using Flutter's Auto Route package to manage navigation in my web app, but I'm having trouble with the back button behavior. When I press the back button in the browser, instead of going back to the previous page, the app navigates all the way back to the home page. This issue only occurs on web; on mobile, the back button works correctly. Additionally, I'm seeing an error in the console that says "Page1PageRouteArgs can not be null because it has a required parameter."

I noticed that this problem occurs when the previous page requires a parameter. It seems like when I press the browser back button, the app tries to load a fresh copy of the previous page, but it loses the data that was passed to the actual previous page (the one just before the current page).

Here's the relevant code from my app's main file:

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

import 'main.gr.dart';

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

// main app widget
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      builder: (context, child) {
        final appRouter = MyRouter();

        return MaterialApp.router(
          title: 'My App',
          routerDelegate: appRouter.delegate(),
          routeInformationParser: appRouter.defaultRouteParser(),
        );
      },
    );
  }
}

// router definition
@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute(page: HomePage, initial: true, name: "HomePageRoute"),
    AutoRoute(page: Page1Page, name: "Page1PageRoute"),
    AutoRoute(page: Page2Page, name: "Page2PageRoute"),
  ],
)
class $MyRouter {}

// home page
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            AutoRouter.of(context).push(Page1PageRoute(sampleParameter: 2));
          },
          child: Text('Go to Page 1'),
        ),
      ),
    );
  }
}

// page 1
class Page1Page extends StatelessWidget {
  final int sampleParameter;

  const Page1Page({super.key, required this.sampleParameter});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            AutoRouter.of(context).push(Page2PageRoute(sampleParameter: 0));
          },
          child: Text('Go to Page 2'),
        ),
      ),
    );
  }
}

// page 2
class Page2Page extends StatelessWidget {
  final int sampleParameter;
  const Page2Page({super.key, required this.sampleParameter});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 2'),
      ),
      body: Center(
        child: Text('This is Page 2'),
      ),
    );
  }
}

Any suggestions on how to fix the back button behavior and the console error would be greatly appreciated. Thanks in advance!

Flutter Auto Route Back Button Goes to Home Page Instead of Previous Page on Web

0 Answers0