How to move to a new pages using bottomnavigationbar in flutter?

Question

I want to move to three new pages when using the three icons in the bottomNavigationBar in flutter (as per my code below). I tried several ways, but the code didn't work and wasn't able to figure it out yet as per my requirement.

The most important thing in this case is to use the existing code and to alter the changes needed to move to new pages using the bottomNavigationBar.

If anyone knows how to navigate to new pages using the bottomNavigationBar (using my existsing code) please let me know.

Thank you in advance.

Code:

class dashboard extends StatefulWidget {
  @override
  _dashboardState createState() => _dashboardState();
}

// ignore: camel_case_types
class _dashboardState extends State<dashboard> {
  int currentIndex = 1;

  changeIndex(index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    final authService = Provider.of<AuthService>(context);
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 80.0, right: 250),
              child: Center(
                child: Container(
                  width: 200.0,
                  height: 20.0,
                  decoration:
                      BoxDecoration(borderRadius: BorderRadius.circular(15.0)),
                  child: (const Text(
                    'Hello',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontWeight: FontWeight.bold, color: Colors.black),
                  )),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 300.0, top: 1.0),
              child: IconButton(
                icon: new Icon(Icons.account_circle, size: 30.0),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => HomePage(),
                    ),
                  );
                },
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 300.0, top: 5.0),
              child: IconButton(
                icon: const Icon(
                  Icons.notifications,
                  size: 25.0,
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => Notifications(),
                    ),
                  );
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 0.0),
              child: Center(
                child: Container(
                  width: 390,
                  height: 450,
                  decoration: BoxDecoration(
                      color: Colors.green.shade100,
                      borderRadius: BorderRadius.circular(10.0)),
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(onPressed: () async {
        await authService.signOut();
      }),
      //  : _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.green[100],
        items: const [
          BottomNavigationBarItem(
            //I want to navigate to a new page Library();
            icon: Icon(Icons.book_online),
            label: 'Library',
          ),
          BottomNavigationBarItem(
            //I want to navigate to a new page Store();
            icon: Icon(Icons.read_more),
            label: 'Store',
          ),
          BottomNavigationBarItem(
            //I want to navigate to a new page Profile();
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

https://stackoverflow.com/a/70343804/13912777 please check this answer. — Alan Bosco, Dec 21 '21 at 08:46
I checked the answer, and it worked. But now after navigating to the relevant pages, i am not able to move back to the previous page (dashboard) from the new page. Any reasons for this? I tried moving to the other pages using other ways and i am able to move back to the previous page. But now i am not able to move back to the previous page after i move to the new page using the bottomNavigationBar. Any reasons for this? — Shehan Liyanaarachchi, Dec 21 '21 at 13:32
Thank you. It worked now. I used `if (index == 2) { Navigator.of(context).push( new MaterialPageRoute( builder: (context) => HomePage(), ), ); }` instead of `if (index == 2) { Navigator.of(context).pushReplacement( new MaterialPageRoute( builder: (context) => HomePage(), ), ); }` It works as required now. Thank you very much! — Shehan Liyanaarachchi, Dec 21 '21 at 13:37

Ananda Pramono · Accepted Answer · 2021-12-22T01:13:16.137

First, you need to declare page destination when you press the BottomNavigation

  final List<Widget> _children = [
    Library(),
    Store(),
    Profile(),
  ];

Then put _children as body on Scaffold.

 return Scaffold(
      body:_children[currentIndex]
 )

Because you have dashboard class, you need separate class to contain dashboard and add it at _children (remember, index start at 0 like array). After that, create function to handle event when the tab is pressed

  void onTabTapped(int index) {
      setState(() {currentIndex = index;});
  }

Add onTabTapped on property on your BottomNavigation

    bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.green[100],
        onTap: onTabTapped,
        items: const [
          BottomNavigationBarItem(
            //I want to navigate to a new page Library();
            icon: Icon(Icons.book_online),
            label: 'Library',
          ),
          BottomNavigationBarItem(
            //I want to navigate to a new page Store();
            icon: Icon(Icons.read_more),
            label: 'Store',
          ),
          BottomNavigationBarItem(
            //I want to navigate to a new page Profile();
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
        ],
      ),

How can i put the `_children` as body on `Scaffold`? Can you break it down? — Shehan Liyanaarachchi, Dec 21 '21 at 10:13
Error: The instance member 'Library' can't be accessed in an initializer. — Luca Ziegler, Dec 15 '22 at 10:21

How to move to a new pages using bottomnavigationbar in flutter?

1 Answers1