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?
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.