Flutter bottom Navigation bar with Routes

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: 

    );
  }

score 11 · Accepted Answer · answered Jul 01 '22 at 12:01

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.

score 0 · Answer 2 · edited Aug 30 '23 at 16:36

0

bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.route),
            label: 'Water',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.calculate_outlined),
            label: 'Calorie',
          ),
        ],
      ),

edited Aug 30 '23 at 16:36

toyota Supra

3,181
4
15
19

answered Aug 30 '23 at 12:22

Joseph Yeow

1

Like That how to navigate other routes of dart page in flutter, how to do it with another way. – Joseph Yeow Aug 30 '23 at 12:22
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 02 '23 at 23:18

Flutter bottom Navigation bar with Routes

2 Answers2