Flutter Bottom Navigation Bar In Flutter | BottomNavigationBar Example

The BottomNavigationBar in Flutter is a versatile widget that provides a convenient way to navigate between different sections or views within a mobile application. It is typically located at the bottom of the screen and allows users to switch between different content areas or pages by tapping on items in the navigation bar.

Here Material Bottom Navigation Bar Library Offical Page, you can see full details of the bottom navigation bar and full explanation.

Key Features of BottomNavigationBar

Navigation Across Views

The primary purpose of the BottomNavigationBar is to facilitate navigation between different parts of an app. Each item in the bar usually corresponds to a different screen or content area, such as Home, Message, Trends, Account, etc.

Icon and Label Representation

Each item in the BottomNavigationBar is represented by an icon and an optional text label. This visual representation makes it easy for users to understand the function of each tab at a glance.

Customizable Appearance

The appearance of the BottomNavigationBar can be customized to match the app’s theme and design. Developers can modify the colors, icons, and labels to create a cohesive look and feel.

State Management

The BottomNavigationBar manages the state of the selected tab, keeping track of which tab is currently active. When a user taps on a tab, the corresponding content is displayed, and the selected tab is visually highlighted.

Dynamic and Static Content

The BottomNavigationBar can support both static and dynamic content. In a static setup, the bar remains constant, while in a dynamic setup, the tabs can change based on user interaction or other factors.

Adaptive Design

The widget is designed to work seamlessly on both Android and iOS, adapting its appearance to match the platform’s design guidelines (Material Design on Android and Cupertino on iOS).

BottomNavigationBar Full Code

class Dashboard extends StatefulWidget {
  const Dashboard({super.key});

  @override
  State<Dashboard> createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {
  int _index= 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: IndexedStack(
          index: _index,
          children: [
            Container(color: Colors.blueGrey,),
            Container(color: Colors.blue,),
            Container(color: Colors.orange,),
            Container(color: Colors.green,),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _index,
        enableFeedback: true,
        unselectedItemColor: Colors.grey,
        selectedFontSize: 12.0,
        selectedItemColor: Colors.redAccent,
        type: BottomNavigationBarType.shifting,
        onTap: (index)=>
        setState(() {
          _index = index;
        }),
        // Setup Bottom Navigation Items
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home_filled), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.mail), label: 'Message'),
          BottomNavigationBarItem(icon: Icon(Icons.local_fire_department), label: 'Trends'),
          BottomNavigationBarItem(icon: Icon(Icons.person_sharp), label: 'Account'),
        ],
      ),
    );
  }
}

Flutter Bottom Navigation Bar Tutorial

BottomNavigationBar Explanation:

MyApp: The root widget of the app.
HomePage: The main page containing the BottomNavigationBar.
children: A list of widgets, each representing a different screen (e.g., Home, Message, Trends, Account).
onTap: A method that updates the index of the currently selected tab.
BottomNavigationBar: The navigation bar at the bottom, where each BottomNavigationBarItem corresponds to a different tab.

HomeScreen, MessageScreen, TrendsScreen, and AccountScreen: Simple stateful widgets representing different screens.
This setup creates a basic app with three tabs: Home, Message, Trends, and Account. Tapping on a tab switches the displayed content accordingly