DEV Community

Cover image for Flutter BottomNavigationBar
Aadarsh Kunwar
Aadarsh Kunwar

Posted on

6

Flutter BottomNavigationBar

In Flutter, a BottomNavigationBar widget is commonly used for creating a bottom navigation bar in an app, allowing users to navigate between different pages. Below is an example of how to implement a simple BottomNavigationBar in Flutter:

Step-by-Step Implementation
Create a Stateful Widget: Since the bottom navigation bar usually interacts with the app state (like switching between pages), it's typically implemented within a StatefulWidget.

Define the Bottom Navigation Bar Items: Specify the items you want in your bottom navigation bar.

Handle Navigation: Update the page content based on the selected item.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _currentIndex = 0;

  // List of widgets for each page
  final List<Widget> _pages = [
    HomePage(),
    SearchPage(),
    ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar Example'),
      ),
      body: _pages[_currentIndex], // Display the selected page

      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

// Example pages
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Home Page'),
    );
  }
}

class SearchPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Search Page'),
    );
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Profile Page'),
    );
  }
}

Enter fullscreen mode Exit fullscreen mode

Key Components:

  • BottomNavigationBar Widget: The primary widget for creating a bottom navigation bar.
  • BottomNavigationBarItem: Represents each item in the bar.
  • currentIndex: Keeps track of the currently selected tab.
  • onTap: Handles the tap event to switch between different pages.

Customization:
You can customize the BottomNavigationBar further by changing the colors, adding more items, adjusting the icon size, or using a custom widget for the items.

Image of Datadog

Measure and Advance Your DevSecOps Maturity

In this white paper, we lay out a DevSecOps maturity model based on our experience helping thousands of organizations advance their DevSecOps practices. Learn the key competencies and practices across four distinct levels of maturity.

Get The White Paper

Top comments (0)

Sentry growth stunted Image

If you are wasting time trying to track down the cause of a crash, it’s time for a better solution. Get your crash rates to zero (or close to zero as possible) with less time and effort.

Try Sentry for more visibility into crashes, better workflow tools, and customizable alerts and reporting.

Switch Tools