NavigationBar Widget and Attributes

Navigation is a critical aspect of any mobile or web application. Flutter, Google's UI toolkit, provides a powerful and customizable NavigationBar widget to facilitate seamless navigation between different sections of your app. In this blog post, we'll explore the key attributes of the NavigationBar widget and provide a practical example to demonstrate its usage.

The NavigationBar widget is part of the Flutter framework and is commonly used to create a bottom navigation bar with tabs. It allows users to easily switch between different sections or functionalities within an app.

Attributes of NavigationBar Widget:

1. items: This attribute takes a list of BottomNavigationBarItem objects, where each item represents a tab in the navigation bar. Each item typically includes an icon and a label.

2. currentIndex: Specifies the index of the currently selected tab. The navigation bar highlights the tab at this index, indicating the active section.

3. onTap: A callback function triggered when a tab is tapped. Developers can use this callback to update the state and manage the content to display based on the selected tab.

Example of NavigationBar Widget:

Let's consider a simple example where we create a NavigationBar with three tabs - Home, Search, and Profile. Each tab is represented by a corresponding icon, and tapping on a tab triggers a callback to update the selected index.

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter NavigationBar Example'),
      ),
      body: Center(
        child: Text('Content of Screen $_selectedIndex'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
        ],
        currentIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
      ),
    );
  }
}

In this example:

• We create a Flutter app with a Scaffold containing an AppBar, a Center widget with a placeholder content (Text widget), and a BottomNavigationBar.

• The BottomNavigationBar has three items: Home, Search, and Profile, each represented by an icon and a label.

• The currentIndex property is used to track the currently selected item, and the onTap callback is triggered when a user taps on a different item, updating the _selectedIndex state.

• The content of the screen changes dynamically based on the selected index.

Run this code, and you will see a basic Flutter app with a bottom navigation bar that allows users to switch between different screens. The NavigationBar widget simplifies the process of implementing a common navigation pattern in Flutter applications. Feel free to customize icons, labels, and content based on the requirements of your app.