How can i navigate to several new pages using the bottom navigation bar in flutter?

Question

I want to navigate to several new pages using my bottom navigation bar in flutter.

I tried several methods to achieve my requirement. But still neither of them worked out for me. I have attached my relevant entire source code below for a better understanding.

Thank you in advance. :)

Dart Source Code :

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

// ignore: camel_case_types
class _dashboardState extends State<dashboard> {
  @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: const EdgeInsets.only(top: 20.0),
              child: MaterialButton(
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => profile()));
                },
                child: const Text('Test'),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 300.0, top: 10.0),
              child: IconButton(
                icon: new Icon(Icons.notifications),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => Notifications(),
                    ),
                  );
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 1.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,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.book_online),
            label: 'Page 1',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.read_more),
            label: 'Page 2',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Page 3',
          ),
        ],
      ),
    );
  }
}

score 0 · Answer 1 · answered Dec 10 '21 at 16:03

There are many propositions, this is one : first, you begin by adding a variable index to know where you are. then add a function to change the content of this variable.

    class _dashboardState extends State< dashboard > {
  
  int currentIndex = 1;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WillPopScope(
        child: (currentIndex == 1)
            ? HomeScreen()
            : (currentIndex == 2)
                ? Screen2()
                : (currentIndex == 3)
                    ? Screen3()
                    : Settings(),
        onWillPop: () async {
          bool backStatus = onWillPop();
          if (backStatus) {
            exit(0);
          }
          return false;
        },
      ),

then link it to the navbar button.

bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    items: const [
      InkWell(
  onTap: () => changeIndex(1),
  child: BottomNavigationBarItem(
        icon: Icon(Icons.book_online),
        label: 'Page 1',
      ),
      .....
    ],
  ),

How can i link this code with my current code though? Since i have a SingleChildScrollView as the body of my Scaffold? — Shehan Liyanaarachchi, Dec 10 '21 at 17:51
You can put all widgets in the body in a sepered state class named Homescreen for example ... And so on — Ayoub Arroub, Dec 10 '21 at 20:45
I tried putting all the widgets inside a separated class. But still it did not work. Is there any possible way to append the above code to my existing source code? — Shehan Liyanaarachchi, Dec 11 '21 at 02:55

How can i navigate to several new pages using the bottom navigation bar in flutter?

1 Answers1