Search code examples
flutterflutter-navigationflutter-go-routerflutter-hotreload

go_router package is not supporting hot reload on chrome in Flutter


Can you please help me with a solution to a problem that I am facing using go_router package in my flutter application.

Sample code:

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

final _router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      name: 'homepage',
      builder: (context, state) => const MyHomePage(),
      routes: [
        GoRoute(
          path: 'shoppingcart',
          name: 'cartpage',
          pageBuilder: (context, state) => MaterialPage(
            key: state.pageKey,
            fullscreenDialog: true,
            child: const ShoppingCartScreen(),
          ),
        )
      ],
    ),
  ],
);

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('App Bar'),
          actions: [
            IconButton(
              icon: const Icon(Icons.shopping_cart),
              onPressed: () => context.pushNamed('cartpage'),
            ),
          ],
        ),
        body: Container(
          color: Colors.green[200],
          child: const Center(child: Text("Home Page")),
        ));
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('shopping cart page'),
      ),
      body: Container(
        color: Colors.purple[200],
        child: const Center(child: Text("Shopping Cart Screen")),
      ),
    );
  }
}

Steps to point out issue:

-Step 1: Run below flutter app code on chrome browser. -Step 2: Click on Shopping Cart icon to go to another screen. -Step 3: click hot reload

by clicking hot reload go_router is not persisting "Shopping Cart Screen", instead it is showing home screen.

What is the solution if I want to stay on same screen after hot reload?

I am using go_router 5.2.0 in my flutter project but it is not supporting hot reload with the code mentioned above.


Solution

  • So far, Flutter have not support Hot Reload for Web. Whenever you press Ctrl + F or even the Hot Reload button, it performs Hot Restart instead.