Search code examples
flutterdartflutter-go-router

Scaffold is not "pushing" to a new screen with Go Router


It seems pretty obvious, but I can't figure out why my Scaffold isn't going down the widget tree. As soon as I navigate to a new page using context.go() or context.push(), I lost my Scaffold.

The problem is easy to reproduce on DartPad, the code is the one below:

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

void main()=> runApp(MyApp());

/// The route configuration.
final GoRouter _router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return FirstScreen();
      },
      routes: <RouteBase>[
        GoRoute(
          path: 'secondScreen',
          builder: (BuildContext context, GoRouterState state) {
            return SecondScreen();
          },
        ),
      ],
    ),
  ],
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}

class FirstScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Center(
      child: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('First screen'),
            FilledButton(
              onPressed: ()=> context.push('/secondScreen'),
              child: const Text('Navigate to next screen'),
            ),
          ],
        ),
      )
    );
  }
}

class SecondScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Center(
      child: Column(
        children: [
          const Text('Second screen'),
          FilledButton(
            onPressed: ()=> context.push('/'),
            child: const Text('Navigate back to first screen'),
          ),
        ],
      )
    );
  }
}

What am I missing? Do I need to create a new Scaffold on every screen?


Solution

  • The Scaffold is part of the first screen and then you replace the first screen with the second screen which does not have a scaffold. You can see the widget tree using Flutter inspector. So the answer is yes. So the first screen scaffold is not a parent widget for any of the SecondScreen widgets, because it is in another branch. widget tree