Create A Flutter Bottom Navigation Bar

Create A Flutter Bottom Navigation Bar

2 min read · 268 words · Shared July 16, 2021 by

Article Summary: Easily create navigation for your app!

The Code

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 (July 16, 2021)

Related Tags

    #flutter

Related Posts

How To Use Firebase As Flutter's Backend · May 3, 2021
How To Use The map() Function In Dart · April 28, 2021

Email Newsletter

On This Page

The Code

Usage

Adding The Code

More Than 3 Items

View Related Posts

May 3, 2021

firebase.png

How To Use Firebase As Flutter's Backend

April 28, 2021

dart.png

How To Use The map() Function In Dart


Loading author data...

    Legal

    Terms

    Disclaimer

    Privacy Policy


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