curved_navigation_bar

Description:

curved navigation bar

curved_navigation_bar #
pub package
A Flutter package for easy implementation of curved navigation bar.

Add dependency #
dependencies:
curved_navigation_bar: ^1.0.6 #latest version
copied to clipboard
Easy to use #
Scaffold(
bottomNavigationBar: CurvedNavigationBar(
backgroundColor: Colors.blueAccent,
items: <Widget>[
Icon(Icons.add, size: 30),
Icon(Icons.list, size: 30),
Icon(Icons.compare_arrows, size: 30),
],
onTap: (index) {
//Handle button tap
},
),
body: Container(color: Colors.blueAccent),
)
copied to clipboard
Attributes #
items: List of Widgets
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
onTap: Function handling taps on items
animationCurve: Curves interpolating button change animation, default Curves.easeOutCubic
animationDuration: Duration of button change animation, default Duration(milliseconds: 600)
height: Height of NavigationBar, min 0.0, max 75.0
maxWidth: Allows to set the width of the navigation bar lower than the entire screen width by default
letIndexChange: Function which takes page index as argument and returns bool. If function returns false then page is not changed on button tap. It returns true by default\
Change page programmatically #
//State class
int _page = 0;
GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();

@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: CurvedNavigationBar(
key: _bottomNavigationKey,
items: <Widget>[
Icon(Icons.add, size: 30),
Icon(Icons.list, size: 30),
Icon(Icons.compare_arrows, size: 30),
],
onTap: (index) {
setState(() {
_page = index;
});
},
),
body: Container(
color: Colors.blueAccent,
child: Center(
child: Column(
children: <Widget>[
Text(_page.toString(), textScaleFactor: 10.0),
ElevatedButton(
child: Text('Go To Page of index 1'),
onPressed: () {
//Page change using state does the same as clicking index 1 navigation button
final CurvedNavigationBarState? navBarState =
_bottomNavigationKey.currentState;
navBarState?.setPage(1);
},
)
],
),
),
));
}
copied to clipboard