AppBar navigation for nested pages - flutter

Question

Normally you would have a Scaffold with its own AppBar on every page, but why is that needed with go_router? Why can't you just have a single Scaffold with an AppBar and let that handle navigation.
Going to the SecondScreen in this example won't update the AppBar and show the back button.
Why is this not possible?
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() => runApp(const MyApp());
final GoRouter _router = GoRouter(
routes: <RouteBase>[
ShellRoute(
builder: (context, state, child) {
return Scaffold(
body: child,
appBar: AppBar(
title: const Text('Test'),
),
);
},
routes: [
GoRoute(
path: '/',
pageBuilder: ((context, state) => const NoTransitionPage(
child: HomeScreen(),
)),
routes: [
GoRoute(
path: 'second',
pageBuilder: ((context, state) => const NoTransitionPage(
child: SecondScreen(),
)),
),
],
),
],
),
],
);
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp.router(
routerConfig: _router,
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
#override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
onPressed: () => context.go('/second'),
child: const Text('Go to the Second screen'),
),
);
}
}
class SecondScreen extends StatelessWidget {
const SecondScreen({super.key});
#override
Widget build(BuildContext context) {
return const Center(
child: Text('Second screen'),
);
}
}

Answer 1

Edit: SecondScreen in this example won't update the AppBar and show the back button :
Because you are using the same appBar for all the child compnents. The main purpose of the ShellRoute is have same appBar. For it to have backButton it cannot have same appBar. The appBar should change.Which violates the usage of ShellRoute
For you to have backbutton you should navigate from ShellRoute to GoRoute or GoRoute to ShellRoute , Withtin the ShellRoute back button is not possible as it creates a shell around its children. So having backbutton inside the ShellRoute would defeat the purpose of having a same appBar throughout.
There are two corrections
change second to /second
GoRoute(
path: '/second', 👈 Change to this
pageBuilder: ((context, state) => const NoTransitionPage(
child: SecondScreen(),
)),
),
For appBar to be having backbutton use context.push('/second') instead of context.go('/second')
- context.go('/second') // Used to replace a page
- context.push('/second') // Used to push a page to navigation stack.
child: ElevatedButton(
onPressed: () => context.push('/second'), // 👈 change it to push
child: const Text('Go to the Second screen'),
),
Refer this examples:
How to change the app bar title depending on the selected GoRouter route?
How to Use Shell Route with GoRoute in same hierarchy Routes