flutter.png

Create A Flutter Bottom Navigation Bar

Easily create navigation for your app!

main.dart
import 'package:flutter/material.dart';
import 'package:bottom_navigation_bar/nav.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Navigation Bar Tutorial',
      home: Nav(),
    );
  }
}
nav.dart
import 'package:flutter/material.dart';
import 'package:bottom_navigation_bar/home_screen.dart';

class Nav extends StatefulWidget {
  
  _NavState createState() => _NavState();
}

class _NavState extends State<Nav> {
  int _selectedIndex = 0;
  List<Widget> _widgetOptions = <Widget>[
    Home(),
    Text('Messgaes Screen'),
    Text('Profile Screen'),
  ];

  void _onItemTap(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar Tutorial'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
            ),
            title: Text(
              'Home',
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.message,
            ),
            title: Text(
              'Messages',
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.person,
            ),
            title: Text(
              'Profile',
            ),
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTap,
        selectedFontSize: 13.0,
        unselectedFontSize: 13.0,
      ),
    );
  }
}
home_screen.dart
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(Icons.ac_unit),
          Icon(Icons.access_alarms),
        ],
      ),
    );
  }
}

Usage

1

Adding The Code

  • Inside of main.dart point your home to your nav component: home: Nav(),
  • Inside of nav.dart add the Bottom Navigation Bar code. Your nav screens go inside the _widgetOptions list. In this example we have a Home(), screen.
2

More Than 3 Items

If you need more than 3 Nav bar items, you will need to add the following property to the nav bar:

...
selectedFontSize: 13.0,
unselectedFontSize: 13.0,
type: BottomNavigationBarType.fixed, // addded line
...

Published on July 16, 2021 (4 months ago) in


View Related Posts

6 months ago

firebase.png

How To Use Firebase As Flutter's Backend

4 months ago

flutter.png

Create A Flutter Bottom Navigation Bar

6 months ago

dart.png

How To Use The map() Function In Dart

Was this snippet helpful?


Written By Benjamin Carlson

Founder coffeeclass.io

More Articles By Benjamin Carlson


Legal

Terms

Disclaimer

Privacy Policy

Carlson Technologies Logo© Copyright 2021, Carlson Technologies LLC. All Rights Reserved.

Powered by

Vercel Logo