Go Router not navigating

Question

I try to learn navigation on flutter using Go Router. If i tap the scan button it will move to scan screen. then if i go back it will return to main screen. the problem is when i tap the scan button again, the screen not move to scan screen. Video (https://drive.google.com/file/d/1PuyxdDOeAxs8tvf0kvReJ1DSVOPyrp5N/view?usp=share_link)

Here's my code:

main.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:go_router/go_router.dart';
import 'package:lestari/Pages/scanpage.dart';

import 'Pages/homepage.dart';
import 'Pages/loginpage.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) {
    GoRouter router = GoRouter(
      routes: [
        GoRoute(
          path: "/",
          name: "home",
          builder: (context, state) => const HomePage(),
          routes: [
            GoRoute(
              path: "scan",
              name: "scan",
              builder: (context, state) => const ScanPage(),
            )
          ]
        ),
        GoRoute(
          path: "/login",
          name: "login",
          builder: (context, state) => const LoginPage(),
        )
      ],initialLocation: "/", routerNeglect: true, debugLogDiagnostics: true
    );
    return MaterialApp.router(
      theme: ThemeData(
        fontFamily: GoogleFonts.poppins().fontFamily
      ),
      routeInformationParser: router.routeInformationParser,
      routeInformationProvider: router.routeInformationProvider,
      routerDelegate: router.routerDelegate,
      debugShowCheckedModeBanner: false,
    );
  }
}

homepage.dart

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

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

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            const Text("Ini Homepage", style: TextStyle(fontSize: 25)),
            Container(
              height: 50,
              width: double.infinity,
              child: ElevatedButton(
                onPressed: (){
                  return context.go("/scan");
                }, 
                child: const Text("Scan", style: TextStyle(fontSize: 25),)
              ),
            )
          ],
        )
      ),
    );
  }
}

scanpage.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(centerTitle: true, title: const Text('ScanPage'),),
      body: SafeArea(child: Text('ScanPage')),
    );
  }
}

I expect it can be go to scan page if the scan button got tap.

UPDATE

This is issue on go_router version 5.2.0 (https://github.com/flutter/flutter/issues/115832)

Bumptious

Answer 1

First of all, move your router variable outside of build method of your Stateless widget.

Next, replace go method with push because go is designed to build an entire navigation stack to the route but push just adds additional navigation to the current navigation stack

Here is your updated HomePage

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

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      body: SafeArea(
          child: Column(
            children: [
              const Text("Ini Homepage", style: TextStyle(fontSize: 25)),
              Container(
                height: 50,
                width: double.infinity,
                child: ElevatedButton(
                    onPressed: (){
                      return context.push("/scan");
                    },
                    child: const Text("Scan", style: TextStyle(fontSize: 25),)
                ),
              )
            ],
          )
      ),
    );
  }
}

Delouse