Flutter auto_route | Pass data to outer router in nested navigation - flutter

Question

I am using Flutter auto_route for my nested navigation, where I would like to pass data (A dynamic string for the AppBar-title and a Widget for the floatingActionButton) from a nested route to an outer route (two levels up from the according to the route tree).
The navigation (tree) has the following structure:
#MaterialAutoRouter(
routes: <AutoRoute>[
AutoRoute(
page: MainNavigationView,
children: [
AutoRoute(
path: 'manage',
page: EmptyRouterPage,
name: 'ManageRouter',
children: [
AutoRoute(
path: 'object',
page: ObjectView,
initial: true,
),
AutoRoute(
path: 'detail',
page: ObjectDetailView,
),
]
)
]
)
]
)
My Page uses nested navigation, where MainNavigationView represents the Scaffold which holds an AppBar and SpeedDial as floatingActionButton of the Scaffold:
class MainNavigationView extends StatefulWidget {
...
}
class _MainNavigationViewState extends State<MainNavigationView> {
final GlobalKey<ScaffoldState> _scaffoldkey = GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
return AutoTabsRouter(
routes: [
const ManageRouter(),
...
],
builder: (context, child, __) {
final tabsRouter = AutoTabsRouter.of(context);
return Scaffold(
key: _scaffoldkey,
appBar: AppBar(...), //Title needs to be set dynamically
body: child,
floatingActionButton: SpeedDial(
... //This needs to be set dynamically
),
...
);
},
);
}
...
}
Inside the route ManageRouter, I can navigate from ObjectView to ObjectDetailView. From both views, I need to pass a dynamic string for the AppBar and the necessary Objects for the floatingActionButton.
The only solution I came up with was a Provider, for the MainNavigationView which would allow me the send the data in a decoupled manner. But it seems like overkill, for something this general.
UPDATE:
I have looked into several other solutions. None of them had a scenario where there was a scaffold in the parent and the nested router was passing values to the parent Scaffold. What I have seen in other examples of other router packages (such as go_router) was a Scaffold in the MainNavigationView with a bottomNavigationBar property set and no appBar or floatingBottons property set. And the nested content (Object/ObjectDetail via ManageRouter) has its own Scaffold with properties set for appBar and bottomNavigationBar.
I have tried solving it with the state management solutions such as Provider but besides problems with triggering a notifyListeners()-action while building (because I placed the notifyListeners() action inside the build-method of the nested content) I had a problem regarding the stack management. Handling that logic, with the side effects of a bottomNavigationBar, which has its own stack, I figured that it is an architectural problem.
I still thank you alls for your effort and interest!

Answer 1

I think AutoRouter package doesn't have any functionality to pass a parameter between Nested routes. Your situation can be solved much easier!
AutoTabsRouter have field named activeIndex.
And this field will updates in AutoTabsRouter builder method when you select an page from your MainNavigationView children.
I use this in my applications to display the selected page icon in the bottomNavigationBar and selected page title in appBar.
Solution for your situation:
class MainNavigationView extends StatefulWidget {
...
}
class _MainNavigationViewState extends State<MainNavigationView> {
final GlobalKey<ScaffoldState> _scaffoldkey = GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
return AutoTabsRouter(
routes: [
const ManageRouter(),
...
],
builder: (context, child, __) {
final tabsRouter = AutoTabsRouter.of(context);
return Scaffold(
key: _scaffoldkey,
appBar: AppBar(
title: tabsRouter.activeIndex == 1? 'ObjectViewTitle' : 'ObjectDetailViewTitle'
), //Title needs to be set dynamically
body: child,
floatingActionButton: SpeedDial(
child: tabsRouter.activeIndex == 1? ObjectViewFab() : ObjectDetailViewFab()
),
...
);
},
);
}
...
}