Flutter Curved Bottom Navigation Bar: A Step-by-Step Guide

Creating a Flutter Curved Bottom Navigation Bar

A curved bottom navigation bar can significantly enhance the visual appeal and user experience of your Flutter application. This guide will walk you through the process of creating one step-by-step.

Step 1: Set Up Your Flutter Project

Ensure you have a Flutter project set up. If not, create a new one using the command:

flutter create my_app

Navigate into your project directory:

cd my_app

Step 2: Add Dependencies

For this, we’ll use the `curved_navigation_bar` package. Open your pubspec.yaml file and add the following dependency:

dependencies: flutter: sdk: flutter curved_navigation_bar: ^1.0.0

After adding the dependency, run flutter pub get in your terminal to fetch the package.

Step 3: Implement the Navigation Bar

Now, let’s integrate the curved navigation bar into your Flutter app. You’ll typically place it within your main screen’s Scaffold widget.

import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Curved Navigation Bar Demo',
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  int _page = 0;
  GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Curved Navigation Bar')),
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,
        index: 0, //default index
        items: [
          Icon(Icons.add, size: 30),
          Icon(Icons.list, size: 30),
          Icon(Icons.compare, size: 30),
          Icon(Icons.person, size: 30),
          Icon(Icons.share, size: 30),
        ],
        color: Colors.blueAccent, //background color
        buttonBackgroundColor: Colors.blueAccent, //button background color
        backgroundColor: Colors.blueAccent, //overall background color
        animationCurve: Curves.easeInOut,
        animationDuration: Duration(milliseconds: 600),
        onTap: (index) {
          setState(() {
            _page = index;
          });
        },
        letIndexChange: (index) {
          // Returns true if the change should be allowed
          return true;
        },
      ),
      body: Center(
        child: Text(
          'Page Number: $_page',
          style: TextStyle(fontSize: 24.0),
        ),
      ),
    );
  }
}

Understanding the Code

• CurvedNavigationBar: This is the main widget provided by the package.
• key: A GlobalKey is used to manage the state of the navigation bar, allowing programmatic control if needed.
• index: Sets the initially selected item.
• items: A list of widgets (usually Icons) to display as navigation items.
• color, buttonBackgroundColor, backgroundColor: These properties control the colors of the navigation bar and its elements.
• animationCurve and animationDuration: Control the animation of the item selection.
• onTap: A callback function that is triggered when an item is tapped. It receives the index of the tapped item.
• letIndexChange: A callback that allows you to control whether an index change should be permitted.

Step 4: Customization and Further Enhancements

You can customize the navigation bar further by adjusting the properties available in the CurvedNavigationBar widget. For example, you can change the height, add labels to your icons, or implement different animations.

To display different content based on the selected tab, you would typically use a PageView or a simple conditional rendering based on the _page variable within your body widget.

Conclusion

Implementing a curved bottom navigation bar in Flutter is straightforward with the help of packages like curved_navigation_bar. This guide provides a solid foundation for adding this modern UI element to your applications, improving both aesthetics and usability.