Unexpected Widget Rebuild with Hot Reload After Adding auto_route

[Mir1001]

After adding the excellent library auto_route to my test project (pages start and second), I noticed unexpected behavior with Flutter's hot reload. Even when I am on the second page and press "Hot reload," (even without any change) all widgets are refreshed (as seen in the debug console). Also if I am on second page, I have notice strange rebuild order starts with main, second than at the end start page.

I/flutter (17433): MyApp On hot reload every time. Why?
I/flutter (17433): MySecondPage only this is expected to reload if bottom text has been changed
I/flutter (17433): MyStartPage On hot MyStartPage reload every time. Why?

Is this expected behavior, and how can I prevent it?

Thanks...

main.dart

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

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

final _appRouter = AppRouter();

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

  // This widget is the root of application.
  @override
  Widget build(BuildContext context) {
    print("MyApp On hot reload every time. Why?");
    return MaterialApp.router(
      routerConfig: _appRouter.config(),
    );
  }
}

@RoutePage()
class MyStartPage extends StatelessWidget {
  const MyStartPage({super.key});
  static const routeName = '/start';
  @override
  Widget build(BuildContext context) {
    print("MyStartPage On hot MyStartPage reload every time. Why?");
    return Scaffold(
      appBar: AppBar(
        title: Text('Stateless Scaffold with Button '),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            context.router.push(MySecondRoute(title: 'Flutter Second Page')); //fix as suggested by [Milad-Akarie](https://github.com/Milad-Akarie)
            //Navigator.push(
            //  context,
            //  MaterialPageRoute(
            //      builder: (context) =>
             //         const MySecondPage(title: 'Flutter gggg Page')),
            //);
            // Define the action when the button is pressed
            print('Button Pressed1');
          },
          child: Text('Press Me'),
        ),
      ),
    );
  }
}

@RoutePage()
class MySecondPage extends StatefulWidget {
  const MySecondPage({super.key, required this.title});
  static const routeName = '/second';
  final String title;

  @override
  State<MySecondPage> createState() => _MySecondPageState();
}

class _MySecondPageState extends State<MySecondPage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    print(
        "MySecondPage only this is expected to reload if bottom text has been changed");
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the this many times x:',
            ),
            Text(
              '$_counter',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

app_router.dart

import 'package:auto_route/auto_route.dart';
import 'app_router.gr.dart';
import 'main.dart';

@AutoRouterConfig(replaceInRouteName: 'Page,Route')
class AppRouter extends $AppRouter {
  @override
  List<AutoRoute> get routes => [
        /// routes go here
        /// @RoutePage()
        AutoRoute(page: MyStartRoute.page, initial: true),
        AutoRoute(page: MySecondRoute.page, path: MySecondPage.routeName),
      ];
}

pubspec.yaml

name: basicflutter
description: "A new Flutter project."
publish_to: "none" # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1

environment:
  sdk: ">=3.4.4 <4.0.0"
dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.6
  auto_route: ^8.3.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0
  build_runner: ^2.4.9
  auto_route_generator: ^8.1.0
flutter:
  uses-material-design: true

[Milad-Akarie]

Hey @Mir1001 first of all I think you have a mistake in your navigation action,

you need to this

context.pushRoute(MySecondRoute(title: ...));

instead of this when using auto_route

 Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) =>
                      const MySecondPage(title: 'Flutter gggg Page')),
            );

secondly, this is how hot reload works, it rebuilds the entire widgets tree, so I'm not sure what issue is here?

[Mir1001]

Thanks Milad-Akarie for quick answer (I am debugging much bigger project). Answer is " this is how hot reload works".. Somehow I was convinced that only MySecondPage will be rebuild since there is no change.

Now I have follow question (I hope real reason for question), how to prevent navigation on hot reload, if it is in build method. For example in SplashScreen. Navigation in build changes router state and I lend on different page after hot reload. Most likely I need some different approach.

Thanks again.

class AppRouter extends $AppRouter {
  @override
  List<AutoRoute> get routes => [
        /// routes go here
        AutoRoute(page: MainRoute.page, path: MainScreen.routeName),
        AutoRoute(page: PermissionRoute.page, path: PermissionScreen.routeName),
        AutoRoute(page: SplashRoute.page, initial: true), // Always builded on hot reload
...
    ];
}
...
class _SplashScreenState extends ConsumerState<SplashScreen> {
  @override
  Widget build(BuildContext context) {
    AuthenticationState authState = ref.watch(authenticationProvider);
    if (authState == AuthenticationState.success) {
      context.router.navigate(PermissionRoute()); // This changes router state and I lend on different page after hot reload  
    } else {
      context.router.navigate(OnboardingRoute()); // This changes router state and I lend on different page after hot reload  
    } ;
    return Scaffold(
      body: Center(child: AutoSizeText("Waiting...", style: TextStyle(fontSize: 20), maxLines: 1)),
    );
  }
}

or example from web

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Timer(Duration(seconds: 3), () {
      Navigator.of(context).pushReplacementNamed('/home'); //This changes router state after hot reload  
    });

    return MaterialApp(
      home: Scaffold(
        body: Container(
          // Add your splash screen UI components here
        ),
      ),
    );
  }
}

[Milad-Akarie]

@Mir1001 from the looks of it you need to use ref.listen instead of ref.watch.
as ref.listen is guaranteed to be trigger only when the state changes.

when you're not using revirpod, try to do your navigation inside initState method, which means using a Statefulwidget instead of a statelessWidget.