curved_labeled_gradient_navigation_bar 2.0.13

Stunning Animating Curved Shape Navigation Bar. Adjustable color, background color, animation curve, animation duration.

curved_labeled_gradient_navigation_bar

pub package

A Flutter package for easy implementation of curved navigation bar.
This package is a fork of the original curved_navigation_bar from https://github.com/namanh11611/curved_labeled_navigation_bar with gradient support for CurvedNavigationBar.

Gradient Preview

---

Add dependency

dependencies:
  curved_labeled_navigation_bar: ^2.0.13 #latest version

---

Easy to use

Scaffold(
  bottomNavigationBar: CurvedNavigationBar(
    backgroundColor: Colors.blueAccent,
    items: [
      CurvedNavigationBarItem(
        child: Icon(Icons.home_outlined),
        label: 'Home',
      ),
      CurvedNavigationBarItem(
        child: Icon(Icons.search),
        label: 'Search',
      ),
      CurvedNavigationBarItem(
        child: Icon(Icons.chat_bubble_outline),
        label: 'Chat',
      ),
      CurvedNavigationBarItem(
        child: Icon(Icons.newspaper),
        label: 'Feed',
      ),
      CurvedNavigationBarItem(
        child: Icon(Icons.perm_identity),
        label: 'Personal',
      ),
    ],
  gradient: LinearGradient(
    begin: Alignment.bottomLeft,
    end: Alignment.topRight,
    colors: [Color(0xFF00E6FF), Color(0xFFAE00E9)],
    transform: GradientRotation(85.84 * math.pi / 180),
  ),
  buttonGradient: LinearGradient(
    begin: Alignment.bottomLeft,
    end: Alignment.topRight,
    colors: [Color(0xFF00E6FF), Color(0xFFAE00E9)],
    transform: GradientRotation(85.84 * math.pi / 180),
  ),
    onTap: (index) {
      // Handle button tap
    },
  ),
  body: Container(color: Colors.blueAccent),
)

---

Attributes

CurvedNavigationBar

Attribute	Description
items	List of CurvedNavigationBarItem
index	Index of NavigationBar, can be used to change current index or to set initial index
color	Color of NavigationBar, default Colors.white
buttonBackgroundColor	Background color of floating button, default same as color attribute
backgroundColor	Color of NavigationBar's background, default Colors.blueAccent
gradient	Gradient background of NavigationBar. Overrides color if provided.
buttonGradient	Gradient background of floating button. Overrides buttonBackgroundColor if provided.
onTap	Function handling taps on items
letIndexChange	Function which takes page index as argument and returns bool. If false, the index does not change. Default is true.
animationCurve	Curve of transition animation. Default is Curves.easeOut.
animationDuration	Duration of transition animation. Default is Duration(milliseconds: 600).
height	Height of the NavigationBar.
maxWidth	Max width of NavigationBar. Can make bar width smaller than the screen width.
iconPadding	Padding around the floating icon button.

CurvedNavigationBarItem

Attribute	Description
child	Icon of CurvedNavigationBarItem
label	Text of CurvedNavigationBarItem
labelStyle	TextStyle for label

---

Change page programmatically

 // State class
  int _page = 0;
  GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        bottomNavigationBar: CurvedNavigationBar(
        gradient: LinearGradient(
          begin: Alignment.bottomLeft,
          end: Alignment.topRight,
          colors: [Color(0xFF00E6FF), Color(0xFFAE00E9)],
          transform: GradientRotation(85.84 * math.pi / 180),
        ),
        buttonGradient: LinearGradient(
          begin: Alignment.bottomLeft,
          end: Alignment.topRight,
          colors: [Color(0xFF00E6FF), Color(0xFFAE00E9)],
          transform: GradientRotation(85.84 * math.pi / 180),
        ),
          key: _bottomNavigationKey,
          items: [
            CurvedNavigationBarItem(
              child: Icon(Icons.home_outlined),
              label: 'Home',
            ),
            CurvedNavigationBarItem(
              child: Icon(Icons.search),
              label: 'Search',
            ),
            CurvedNavigationBarItem(
              child: Icon(Icons.chat_bubble_outline),
              label: 'Chat',
            ),
            CurvedNavigationBarItem(
              child: Icon(Icons.newspaper),
              label: 'Feed',
            ),
            CurvedNavigationBarItem(
              child: Icon(Icons.perm_identity),
              label: 'Personal',
            ),
          ],
          onTap: (index) {
            setState(() {
              _page = index;
            });
          },
        ),
        body: Container(
          color: Colors.blueAccent,
          child: Center(
            child: Column(
              children: <Widget>[
                Text(_page.toString(), textScaler: TextScaler.linear(10.0)),
                ElevatedButton(
                  child: Text('Go To Page of index 1'),
                  onPressed: () {
                    final CurvedNavigationBarState? navBarState =
                        _bottomNavigationKey.currentState;
                    navBarState?.setPage(1);
                  },
                )
              ],
            ),
          ),
        ),
    );
  }