{"id":643,"date":"2021-04-22T00:06:11","date_gmt":"2021-04-21T22:06:11","guid":{"rendered":"https:\/\/fileidea.com\/?p=643"},"modified":"2021-04-29T13:25:36","modified_gmt":"2021-04-29T11:25:36","slug":"create-a-simple-bottom-navigation-bar-in-flutter","status":"publish","type":"post","link":"https:\/\/fileidea.com\/2021\/04\/22\/create-a-simple-bottom-navigation-bar-in-flutter\/","title":{"rendered":"Create a simple Bottom Navigation Bar in Flutter"},"content":{"rendered":"\n

This is my tutorial on how to create a simple bottom navigation bar. It’s very simple if you choose not to reinvent the wheel. We will first create a bottom navigational bar and then add some content in it. What we will use is the bottom_navy_bar package<\/strong>. I am using version 6.0.0.<\/p>\n\n\n\n

  1. Open Visual Code.<\/li>
  2. Create an new Flutter application CTRL+SHIFT+P (and select Flutter: New Application Project<\/strong> and select somewhere you keep your projects, click Select, and then name your project, I’ll go with simplemenu<\/strong>.<\/li>
  3. Run the application with flutter run<\/strong> to see everything is in order and working before doing any changes.<\/li>
  4. Then add bottom_navy_bar <\/strong>to your dependencies to the pubspec.yaml<\/strong> file so it looks something like this:<\/li><\/ol>\n\n\n
    \nname: simplemenu\ndescription: A new Flutter project.\n\npublish_to: 'none' # Remove this line if you wish to publish to pub.dev\n\nversion: 1.0.0+1\n\nenvironment:\n  sdk: ">=2.12.0 <3.0.0"\n\ndependencies:\n  flutter:\n    sdk: flutter\n  cupertino_icons: ^1.0.2\n  bottom_navy_bar: ^6.0.0\ndev_dependencies:\n  flutter_test:\n    sdk: flutter\n\nflutter:\n  uses-material-design: true\n<\/pre><\/div>\n\n\n
    5. Add some code. Through the help of pedromassango<\/a> who is actually the author of the package, we can use his example to have a simple bottom navigation bar:<\/p>\n\n\n
    \nimport 'package:bottom_navy_bar\/bottom_navy_bar.dart';\nimport 'package:flutter\/material.dart';\n\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'FileIdea Menu',\n      home: MyHomePage(),\n    );\n  }\n}\n\nclass MyHomePage extends StatefulWidget {\n  @override\n  _MyHomePageState createState() => _MyHomePageState();\n}\n\nclass _MyHomePageState extends State<MyHomePage> {\n  int _currentIndex = 0;\n  int _counter = 0;\n\n  void _incrementCounter() {\n    setState(() {\n      _counter++;\n    });\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(title: Text("FileIdea Menu")),\n      body: Center(\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: <Widget>[\n            Text('You have pushed the button this many times:'),\n            Text(\n              '$_counter',\n              style: Theme.of(context).textTheme.headline4,\n            ),\n          ],\n        ),\n      ),\n      floatingActionButton: FloatingActionButton(\n        onPressed: _incrementCounter,\n        tooltip: 'Increment',\n        child: Icon(Icons.add),\n      ),\n      bottomNavigationBar: BottomNavyBar(\n        selectedIndex: _currentIndex,\n        showElevation: true,\n        itemCornerRadius: 24,\n        curve: Curves.easeIn,\n        onItemSelected: (index) => setState(() => _currentIndex = index),\n        items: <BottomNavyBarItem>[\n          BottomNavyBarItem(\n            icon: Icon(Icons.apps),\n            title: Text('Home'),\n            activeColor: Colors.red,\n            textAlign: TextAlign.center,\n          ),\n          BottomNavyBarItem(\n            icon: Icon(Icons.people),\n            title: Text('Users'),\n            activeColor: Colors.purpleAccent,\n            textAlign: TextAlign.center,\n          ),\n          BottomNavyBarItem(\n            icon: Icon(Icons.message),\n            title: Text(\n              'Messages',\n            ),\n            activeColor: Colors.pink,\n            textAlign: TextAlign.center,\n          ),\n          BottomNavyBarItem(\n            icon: Icon(Icons.settings),\n            title: Text('Settings'),\n            activeColor: Colors.blue,\n            textAlign: TextAlign.center,\n          ),\n        ],\n      ),\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
     The important part here is obviously that we are adding items (BottomNavyBarItems<\/strong>) to bottomNavigationBar<\/strong>‘s items <\/strong>property. You can change icon, title, active color, textalign too to whatever you want. Then selectedIndex <\/strong>is keeping track on which item should be active which we change (_currentIndex<\/strong>) whenever the user clicks on a item through onItemSelected<\/strong>.<\/p>\n\n\n\n
    How it looks after we are done here:<\/p>\n\n\n\n
    \"simple<\/figure>\n\n\n\n
    Okay now what? So you got your menu, but nothing special happens we click on one of the navigational bottom bar menu items. We can play around with the currentIndex which we set for each time a menu item is clicked. So you can work with this index like so:<\/p>\n\n\n
    \nimport 'package:bottom_navy_bar\/bottom_navy_bar.dart';\nimport 'package:flutter\/material.dart';\n\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'FileIdea Menu',\n      home: MyHomePage(),\n    );\n  }\n}\n\nclass MyHomePage extends StatefulWidget {\n  @override\n  _MyHomePageState createState() => _MyHomePageState();\n}\n\nclass _MyHomePageState extends State<MyHomePage> {\n  int _currentIndex = 0;\n  int _counter = 0;\n\n  void _incrementCounter() {\n    setState(() {\n      _counter++;\n    });\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(title: Text("FileIdea Menu")),\n      body: Center(\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: <Widget>[\n            Text('Showing page $_currentIndex'),\n          ],\n        ),\n      ),\n      bottomNavigationBar: BottomNavyBar(\n        selectedIndex: _currentIndex,\n        showElevation: true,\n        itemCornerRadius: 24,\n        curve: Curves.easeIn,\n        onItemSelected: (index) => setState(() => _currentIndex = index),\n        items: <BottomNavyBarItem>[\n          BottomNavyBarItem(\n            icon: Icon(Icons.apps),\n            title: Text('Home'),\n            activeColor: Colors.red,\n            textAlign: TextAlign.center,\n          ),\n          BottomNavyBarItem(\n            icon: Icon(Icons.people),\n            title: Text('Users'),\n            activeColor: Colors.purpleAccent,\n            textAlign: TextAlign.center,\n          ),\n          BottomNavyBarItem(\n            icon: Icon(Icons.message),\n            title: Text(\n              'Messages',\n            ),\n            activeColor: Colors.pink,\n            textAlign: TextAlign.center,\n          ),\n          BottomNavyBarItem(\n            icon: Icon(Icons.settings),\n            title: Text('Settings'),\n            activeColor: Colors.blue,\n            textAlign: TextAlign.center,\n          ),\n        ],\n      ),\n    );\n  }\n}\n\n<\/pre><\/div>\n\n\n
    \"Showing<\/figure>\n\n\n\n
    So now we get 0 if we see “Showing page 0”,  “Showing page 1” if we go to the people icon and so forth. Not very interesting though isn’t it? So if we want to add some “real” content we could go down the route and start adding routes and then go switch between pages that way with the help of Navigator.pop(context)<\/strong>, maybe create some kind of a callback method to keep track of what’s happening, but there is another option, PageController<\/strong>. <\/p>\n\n\n\n
    With PageController <\/strong>we can set a “scrollable list that works page by page from an explicit [List] of widgets”. We set the PageControl <\/strong>inside the PageView <\/strong>which we set inside our initial page. By using this we will have all content at one place (kind of) and therefore it might be the most simple solution to achieve our goal of having a simple bottom navigation bar with content on each page.<\/p>\n\n\n
    \nimport 'package:bottom_navy_bar\/bottom_navy_bar.dart';\nimport 'package:flutter\/material.dart';\n\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'FileIdea Menu',\n      home: MyHomePage(),\n    );\n  }\n}\n\nclass MyHomePage extends StatefulWidget {\n  @override\n  _MyHomePageState createState() => _MyHomePageState();\n}\n\nclass _MyHomePageState extends State<MyHomePage> {\n  late PageController _pageController;\n\n  @override\n  void initState() {\n    super.initState();\n    _pageController = PageController();\n  }\n\n  @override\n  void dispose() {\n    _pageController.dispose();\n    super.dispose();\n  }\n\n  int _currentIndex = 0;\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(title: Text("FileIdea Menu")),\n      body: SizedBox.expand(\n        child: PageView(\n          controller: _pageController,\n          onPageChanged: (index) {\n            setState(() => _currentIndex = index);\n          },\n          children: <Widget>[\n            Container(\n              color: Colors.blueGrey,\n            ),\n            Container(\n              color: Colors.red,\n            ),\n            Container(\n              color: Colors.green,\n            ),\n            Container(\n              color: Colors.blue,\n            ),\n          ],\n        ),\n      ),\n      bottomNavigationBar: BottomNavyBar(\n        selectedIndex: _currentIndex,\n        showElevation: true,\n        itemCornerRadius: 24,\n        curve: Curves.easeIn,\n        onItemSelected: (index) => {\n          setState(() => _currentIndex = index),\n          _pageController.jumpToPage(index)\n        },\n        items: <BottomNavyBarItem>[\n          BottomNavyBarItem(\n            icon: Icon(Icons.apps),\n            title: Text('Home'),\n            activeColor: Colors.pink,\n            textAlign: TextAlign.center,\n          ),\n          BottomNavyBarItem(\n            icon: Icon(Icons.people),\n            title: Text('Users'),\n            activeColor: Colors.purpleAccent,\n            textAlign: TextAlign.center,\n          ),\n          BottomNavyBarItem(\n            icon: Icon(Icons.message),\n            title: Text(\n              'Messages',\n            ),\n            activeColor: Colors.pink,\n            textAlign: TextAlign.center,\n          ),\n          BottomNavyBarItem(\n            icon: Icon(Icons.settings),\n            title: Text('Settings'),\n            activeColor: Colors.blue,\n            textAlign: TextAlign.center,\n          ),\n        ],\n      ),\n    );\n  }\n}\n\n<\/pre><\/div>\n\n\n
    Pay attention to the marked rows. We are now utulizing the jumpToPage() <\/strong>method from the _pageController<\/strong> so we can browse between the pages from the PageView<\/strong> children.<\/p>\n\n\n\n
    As you can see the colours change when we browse each page.  <\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Now we have the ability to use the index and go between Widgets inside the PageView children. We already added 4 Containers that has different colors.  Let us add something, what about a gallery perhaps?<\/p>\n\n\n\n
    Add a gallery as content<\/h3>\n\n\n\n
    Let us start by typing stl <\/strong>and create a new stateless widget <\/strong>called PeopleContent<\/strong> then go to your pubspec.yaml<\/strong> and add gallery_view<\/strong> to your dependencies.<\/p>\n\n\n
    \nname: simplemenu\ndescription: A new Flutter project.\n\npublish_to: 'none'\nversion: 1.0.0+1\n\nenvironment:\n  sdk: ">=2.12.0 <3.0.0"\n\ndependencies:\n  flutter:\n    sdk: flutter\n  bottom_navy_bar: ^6.0.0\n\n  cupertino_icons: ^1.0.2\n  gallery_view: ^0.0.4\n\ndev_dependencies:\n  flutter_test:\n    sdk: flutter\n  pedantic: ^1.10.0\n\nflutter:\n\n  uses-material-design: true\n\n<\/pre><\/div>\n\n\n
    Then add a GalleryView<\/strong> so we can see images at the people page like this:<\/p>\n\n\n
    \nclass PeopleContent extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Container(\n      child: GalleryView(imageUrlList: [\n        "https:\/\/images.unsplash.com\/photo-1500100586562-f75ff6540087?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",\n        "https:\/\/images.unsplash.com\/photo-1523719185231-aff40a400361?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60",\n      ]),\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
    Then inside your _MyHomePageState under the people, replace Container with color to your new PeopleContent Widget. If you get null safety error, try running with no sound null safety.<\/p>\n\n\n
    \nflutter run --no-sound-null-safety\n<\/pre><\/div>\n\n\n
    Now if we take a look we have some images showing in our people page when we click on the menu item.<\/p>\n\n\n\n
    \"Browsing<\/figure>\n\n\n\n
    I realized the images has nothing to do with people but you get the point. It is easy to have content and a bottom navigational menu this way! <\/p>\n","protected":false},"excerpt":{"rendered":"
    This is my tutorial on how to create a simple bottom navigation bar. It’s very simple if you choose not to reinvent the wheel. We will first create a bottom navigational bar and then add some content in it. What we will use is the bottom_navy_bar package. I am using version 6.0.0. Open Visual Code. … <\/p>\n
    Continue reading “Create a simple Bottom Navigation Bar in Flutter”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18,19],"tags":[49,20,51,21],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/643"}],"collection":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/comments?post=643"}],"version-history":[{"count":0,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/643\/revisions"}],"wp:attachment":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/media?parent=643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/categories?post=643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/tags?post=643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}