Flutter bottom Navigation bar with Routes - flutter

Question

I want to navigate through pages using routes and Navigator.pushNamed() on a Bottom Navigation Bar. Here, I'm using a FlashyTab bar for aesthetics. To be more specific, pressing each of the icons on the navigation bar should take me to a different page, and I want to implement this using routes.
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
bottomNavigationBar: FlashyTabBar(
animationCurve: Curves.linear,
selectedIndex: _selectedIndex,
showElevation: true,
onItemSelected: (index) => setState(() {
_selectedIndex = index;
}),
items: [
FlashyTabBarItem(
icon: const Icon(Icons.account_box),
title: const Text('Challenger'),
),
FlashyTabBarItem(
icon: const Icon(Icons.phone),
title: const Text('Contact'),
),
FlashyTabBarItem(
icon: const Icon(Icons.dashboard_rounded),
title: const Text('Events'),
),
FlashyTabBarItem(
icon: const Icon(Icons.badge),
title: const Text('Quick Scan'),
),
],
),
body:
);
}

Answer 1

In your screen define this
List<Widget> pageList = [
const ChallengerScreen(),
const ContactScreen(),
const EventsScreen(),
const QuickScanScreen(),
];
In body use it like this
return Scaffold(
bottomNavigationBar: FlashyTabBar(
animationCurve: Curves.linear,
selectedIndex: _selectedIndex,
showElevation: true,
onItemSelected: (index) => setState(() {
_selectedIndex = index;
}),
items: [
FlashyTabBarItem(
icon: const Icon(Icons.account_box),
title: const Text('Challenger'),
),
FlashyTabBarItem(
icon: const Icon(Icons.phone),
title: const Text('Contact'),
),
FlashyTabBarItem(
icon: const Icon(Icons.dashboard_rounded),
title: const Text('Events'),
),
FlashyTabBarItem(
icon: const Icon(Icons.badge),
title: const Text('Quick Scan'),
),
],
),
//you have to just do changes here...
body:pageList.elementAt(_selectedIndex)
);
You don't need to use Navigator.pushNamed() it not the right method to do.