BottomNavigationBarItem open respective page when clicked on the Icon

Question

I am looking for opening a page when I clicked on the Icon which is in BottomNavigationBarItem in the flutter.

I tried with indexing but I am not able to understand is I put all my icons in a list then how to get it.

 class CustomAppBar extends StatelessWidget {
 final List<BottomNavigationBarItem> bottomBarItems = [];

  final bottomNavigationBarItemStyle = TextStyle(fontStyle: 
    FontStyle.normal, color: Colors.black);

  CustomAppBar() {
   bottomBarItems.add(
   BottomNavigationBarItem(icon: Icon(Icons.home,color: Colors.brown,),
     title: Text("Explore", style: 
    bottomNavigationBarItemStyle.copyWith(color: Colors.green)),
     ),
  );
  bottomBarItems.add(new BottomNavigationBarItem(icon: new 
     Icon(Icons.favorite,color: Colors.black,),
      title: Text("Watchlist",style: bottomNavigationBarItemStyle,),
   ),
  );
   bottomBarItems.add(new BottomNavigationBarItem(icon: new 
      Icon(Icons.local_offer,color: Colors.black,),
       title: Text("Deals",style: bottomNavigationBarItemStyle,),
   ),
    );
  bottomBarItems.add(new BottomNavigationBarItem(icon: new 
   Icon(Icons.notifications,color: Colors.black,),
    title: Text("Notifications",style: bottomNavigationBarItemStyle,),
  ),
   );
   }

   @override
   Widget build(BuildContext context) {
   return Material(
     elevation: 15.0,
     child: BottomNavigationBar(
      items: bottomBarItems,
       type: BottomNavigationBarType.fixed,
      ),
     );
    }
   }

   /*class NewPage extends StatelessWidget {
  String title;
  NewPage(this.title);
   @override
   Widget build(BuildContext context) {
   return Scaffold(
   body: Center(child: Text(title),),

    );
    }
   }*/

Answer 1

Here is your solution, although i would really suggest looking up a tutorial or something like that to fully understand it.

import 'package:flutter/material.dart';

class YourApplication extends StatefulWidget {
  @override
  YourApplicationState createState() {
    return new YourApplicationState();
  }
}

class YourApplicationState extends State<YourApplication> {
  int index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _getBody(index),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: index,
        onTap: (value) => setState(() => index = value),
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
            ),
            title: Text(
              "Explore",
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.favorite,
            ),
            title: Text(
              "Watchlist",
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.notifications,
            ),
            title: Text(
              "Notifications",
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.local_offer,
            ),
            title: Text(
              "Deals",
            ),
          ),
        ],
        type: BottomNavigationBarType.fixed,
      ),
    );
  }

  Widget _getBody(int index) {
    switch (index) {
      case 0:
        return _buildFirstPage(); // Create this function, it should return your first page as a widget
      case 1:
        return _buildSecondPage(); // Create this function, it should return your second page as a widget
      case 2:
        return _buildThirdPage(); // Create this function, it should return your third page as a widget
      case 3:
        return _buildFourthPage(); // Create this function, it should return your fourth page as a widget
    }

    return Center(child: Text("There is no page builder for this index."),);
  }
}

Answer 2

Use IconButton instead of Icon . Here's an example:

BottomNavigationBarItem(
          icon: IconButton(
            icon: Icon(Icons.home),
            onPressed: () {
              Navigator.push(
               context,
                   MaterialPageRoute(builder: (context) => NewPage()),
              );
            },
          ),
        ),

Answer 3

I recommend reading this short article to understand how to use the BottomNavigationBar Widget. It's a tutorial that will get you started.

In a nutshell you have to provide a State to the widget since you are trying to change pages. A stateless widget will not know which icon is currently active. Furthermore you have to provide a callback as a Parameter to the BottomNavigationBar widget, which sets the currently active index when an icon is tapped, so that the NavigationBar knows which page to show.

Answer 4

You can also implement it like this:

BottomNavigationBarItem(
  icon: IconButton(
   icon: Icon(Icons.home),
   onPressed: () {
     Navigator.of(context).push(
       MaterialPageRoute(
         builder: (context) => YourPage(),
       ),
     );
   },
 ),
 label: 'Home',
)