Create a Curved Navigation Bar in Flutter with 'curved_navigation_bar'

Published on by Flutter News Hub

Create a Curved Navigation Bar in Flutter with 'curved_navigation_bar'

The 'curved_navigation_bar' package provides an easy way to implement curved navigation bars in your Flutter applications.

Installation

To use this package, add it as a dependency to your project's pubspec.yaml file:

dependencies:
  curved_navigation_bar: ^1.0.3

Usage

Once the package is installed, you can start using it by importing it into your Dart file:

import 'package:curved_navigation_bar/curved_navigation_bar.dart';

To create a curved navigation bar, use the CurvedNavigationBar widget. This widget takes a list of widgets as its items parameter, and a callback function as its onTap parameter. The callback function is called when any of the items in the navigation bar is tapped.

CurvedNavigationBar(
  items: [
    Icon(Icons.add, size: 30),
    Icon(Icons.list, size: 30),
    Icon(Icons.compare_arrows, size: 30),
  ],
  onTap: (index) {
    // Handle button tap
  },
)

Customizing the Navigation Bar

You can customize the appearance of the navigation bar by setting its various properties. The following properties are available:

  • color: The color of the navigation bar.
  • buttonBackgroundColor: The background color of the floating button.
  • backgroundColor: The color of the navigation bar's background.
  • animationCurve: The curve used to interpolate the button change animation.
  • animationDuration: The duration of the button change animation.
  • height: The height of the navigation bar.
CurvedNavigationBar(
  color: Colors.blueAccent,
  buttonBackgroundColor: Colors.white,
  backgroundColor: Colors.white,
  animationCurve: Curves.easeOutCubic,
  animationDuration: Duration(milliseconds: 600),
  height: 50.0,
)

Changing the Page Programmatically

You can also change the currently selected page programmatically by using the setPage() method of the CurvedNavigationBarState class. To get a reference to the CurvedNavigationBarState object, use the key property of the CurvedNavigationBar widget.

final CurvedNavigationBarState? navBarState = _bottomNavigationKey.currentState;
navBarState?.setPage(1);

Conclusion

The 'curved_navigation_bar' package is a great way to add curved navigation bars to your Flutter applications. It is easy to use and customize, and it provides a number of features to make it a powerful tool for creating user interfaces.

Flutter News Hub