auto_route_library
auto_route_library copied to clipboard
What is the correct way to use nested navigators?
I want to have different navigators for Home tab and Bussiness tab, but I get blank screen for both.
I had to use a different AutoRouter in the tabs because the tabs will have the same internal screen...
![image](https://user-images.githubusercontent.com/45899676/188256453-1705a5a2-5530-45d8-af9e-ae0aea2507e1.png)
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class MainPage extends StatefulWidget {
const MainPage({Key? key}) : super(key: key);
@override
State<MainPage> createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
int _selectedIndex = 0;
final _navigators = [
MyAutoRouter(GlobalKey<NavigatorState>()),
MyAutoRouter(GlobalKey<NavigatorState>()),
];
late final _routers = List.generate(
2,
(index) => Router(
routerDelegate: _navigators[index].delegate(initialRoutes: [
{
0: HomeRoute(),
1: SettingRoute(),
}[index]!,
]),
routeInformationParser: _navigators[index].defaultRouteParser(),
),
);
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return CupertinoTabScaffold(
tabBuilder: (context, index) => _routers[index],
tabBar: CupertinoTabBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Business',
),
],
onTap: _onItemTapped,
),
);
}
}
hello. @Kahoulam , please check the following example
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return AutoTabsScaffold(
appBarBuilder: (_, tabsRouter) => AppBar(
backgroundColor: Colors.indigo,
title: const Text('FlutterBottomNav'),
centerTitle: true,
leading: const AutoBackButton(),
),
backgroundColor: Colors.indigo,
routes: const [
PostsRouter(),
UsersRouter(),
SettingsRouter(),
],
bottomNavigationBuilder: (_, tabsRouter) {
return SalomonBottomBar(
margin: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 40,
),
currentIndex: tabsRouter.activeIndex,
onTap: tabsRouter.setActiveIndex,
items: [
SalomonBottomBarItem(
selectedColor: Colors.amberAccent,
icon: const Icon(
Icons.post_add,
size: 30,
),
title: const Text('Posts'),
),
SalomonBottomBarItem(
selectedColor: Colors.blue[200],
icon: const Icon(
Icons.person,
size: 30,
),
title: const Text('Users'),
),
SalomonBottomBarItem(
selectedColor: Colors.pinkAccent[100],
icon: const Icon(
Icons.settings,
size: 30,
),
title: const Text('Settings'),
)
],
);
},
);
}
}
Thank @mohammedgmgn, I had to use a different AutoRouter in the tabs because the tabs will have the same internal screen...
@Kahoulam Can you explain more? do you need to use AutoTabsRouter with CupertinoTabsScaffold?
Thank @Milad-Akarie,
No, I just need to use same routes in Home
and Business
tabs.