curved_nav_bar

Bottom nav bar with a center action button. Use the button as a middle tab, or to open a camera, dialog, or any other action (pub.dev).

Screenshots

Usage

Example

Add the package to your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  curved_nav_bar:

Import it:

import 'package:curved_nav_bar/curved_nav_bar.dart';

The previous paths still work:

import 'package:curved_nav_bar/flutter_curved_bottom_nav_bar.dart';
import 'package:curved_nav_bar/fab_bar/fab_bottom_app_bar_item.dart';
import 'package:curved_nav_bar/curved_bar/curved_action_bar.dart';

CurvedNavBar

Property	Type	Description
appBarItems	List<FABBottomAppBarItem>	Destinations. Same length as bodyItems. Must be even when actionButton is set.
bodyItems	List<Widget>	Body for each destination.
initialIndex	int	Page shown first. Defaults to 0. Change it later to switch the body.
onTap	ValueChanged<int>?	Called with the selected index.
appBar	PreferredSizeWidget?	Optional scaffold app bar, usually an AppBar. Null by default.
scaffoldBackgroundColor	Color?	Scaffold background.
extendBody	bool	Whether the body extends behind the bar. Defaults to true.
actionButton	CurvedActionBar?	Center button. When null, the bar has no notch.
actionBarView	Widget?	Body shown while actionButton is selected.
activeColor	Color	Selected label color. Defaults to Colors.black.
inActiveColor	Color	Unselected label color. Defaults to Colors.black26.
navBarBackgroundColor	Color	Bar background. Defaults to Colors.white.
itemTextStyle	TextStyle?	Default label style and size.
centerItemTextStyle	TextStyle?	Center label style when the action button does not set one.
navBarHeight	double	Bar height. Defaults to 60.
resizeToAvoidBottomInset	bool?	Whether the body avoids the keyboard.

FABBottomAppBarItem

Property	Type	Description
activeIcon	Widget	Icon while this tab is selected.
inActiveIcon	Widget?	Icon while this tab is not selected. Falls back to activeIcon.
text	String	Label under the icon.
textStyle	TextStyle?	Label style and size. Overrides itemTextStyle. A null color keeps the active and inactive colors.

CurvedActionBar

Property	Type	Description
activeIcon	Widget	Icon while the button is selected.
inActiveIcon	Widget?	Icon while the button is not selected. Falls back to activeIcon.
text	String	Label in the notch.
textStyle	TextStyle?	Style and size of that label.
onTab	ValueChanged<bool>?	Called with true when the button is pressed.

Choose the starting page

initialIndex selects the body when the bar is first built. The default is 0.

CurvedNavBar(
  initialIndex: 1, // open on the second page
  appBarItems: items,
  bodyItems: pages,
)

Give the bar a new initialIndex on a later build and the body follows. A tab the user already picked is left alone until initialIndex changes.

You can also move the page from code:

final navKey = GlobalKey<CurvedNavBarState>();

CurvedNavBar(
  key: navKey,
  onTap: (index) {},
  appBarItems: items,
  bodyItems: pages,
)

navKey.currentState?.setPage(1);

Label size and style

Set textStyle on an item, or itemTextStyle on the bar for every item that does not set its own. Use fontSize for the size. Leave color null to keep activeColor and inActiveColor.

FABBottomAppBarItem(
  activeIcon: const Icon(Icons.home, color: Colors.blue),
  inActiveIcon: const Icon(Icons.home, color: Colors.black26),
  text: 'Home',
  textStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
)

The center label works the same way through CurvedActionBar.textStyle.

How to use

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

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return CurvedNavBar(
      appBar: AppBar(title: const Text('Curved nav bar')),
      initialIndex: 0,
      onTap: (int index) => debugPrint('Selected tab $index'),
      actionButton: CurvedActionBar(
        onTab: (bool selected) => debugPrint('Camera selected: $selected'),
        text: 'Camera',
        textStyle: const TextStyle(fontSize: 12, fontWeight: FontWeight.w600),
        activeIcon: const Icon(Icons.camera_alt, color: Colors.orange, size: 40),
        inActiveIcon: const Icon(Icons.camera_alt_outlined, color: Colors.orange, size: 40),
      ),
      activeColor: Colors.blue,
      inActiveColor: Colors.black45,
      navBarBackgroundColor: Colors.limeAccent,
      itemTextStyle: const TextStyle(fontSize: 12, fontWeight: FontWeight.w600),
      appBarItems: const [
        FABBottomAppBarItem(
          activeIcon: Icon(Icons.home, color: Colors.blue),
          inActiveIcon: Icon(Icons.home, color: Colors.black26),
          text: 'Home',
        ),
        FABBottomAppBarItem(
          activeIcon: Icon(Icons.wallet_giftcard, color: Colors.blue),
          inActiveIcon: Icon(Icons.wallet_giftcard, color: Colors.black26),
          text: 'Wallet',
          textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
        ),
      ],
      bodyItems: const [
        ColoredBox(color: Colors.blue),
        ColoredBox(color: Colors.pinkAccent),
      ],
      actionBarView: const ColoredBox(color: Colors.orange),
    );
  }
}

Pull Requests

Pull requests are most welcome. It usually will take me within 24-48 hours to respond to any issue or request.

1. Please keep PR titles easy to read and descriptive of changes, this will make them easier to merge :)
2. Pull requests must be made against develop branch. Any other branch (unless specified by the maintainers) will get rejected.

Created & Maintained By

Boffin Coders Pvt. Ltd.

If you found this project helpful or you learned something from the source code and want to thank me, consider buying me a cup of :coffee:

• PayPal

License

Released under the MIT License. See LICENSE.