In this tutorial, we are going to learn about to create curved navigation bar in Flutter.
adding the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.
dependencies:
curved_navigation_bar: ^0.3.0
You can install the package from the command line using the below code with Flutter as shown.
$ flutter pub get
After Adding the dependency package to the pubspec.yaml file , you can now import the package into the dart code by using the below code. without adding the dependency packge to the pubspec.yaml file if you import it will show package not found an error.
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
Use the below sample code to create curved navigation bar in the flutter app.
Scaffold(
bottomNavigationBar: CurvedNavigationBar(
backgroundColor: Colors.blueAccent,
items:
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),
)
items: List of Widgets
index: index of NavigationBar, it will be used to change current index or to set initial index
color: Color of NavigationBar, default Colors.white, it will be used to set the color.
buttonBackgroundColor: to set background color of floating button, bydefault same as color attribute
backgroundColor: Color of NavigationBar’s background, default Colors.blueAccent
onTap: Function handling taps on items, means it handles tap action.
animationCurve: Curves interpolating button change animation, default Curves.easeOutCubic
animationDuration: It will be used to set duration of button change animation, bydefault Duration(milliseconds: 600)
height: It will be used to set the Height of NavigationBar, min 0.0, max 75.0
As shown below in sample code to use attributes.
//State class
int _page = 0;
GlobalKey _bottomNavigationKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: CurvedNavigationBar(
key: _bottomNavigationKey,
items:
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:
Text(_page.toString(), textScaleFactor: 10.0),
RaisedButton(
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);
},
)
],
),
),
));
}
import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
void main() => runApp(MaterialApp(home: BottomNavBar()));
class BottomNavBar extends StatefulWidget {
@override
_BottomNavBarState createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State
int _page = 0;
GlobalKey _bottomNavigationKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: CurvedNavigationBar(
key: _bottomNavigationKey,
index: 0,
height: 50.0,
items:
Icon(Icons.add, size: 30),
Icon(Icons.list, size: 30),
Icon(Icons.compare_arrows, size: 30),
Icon(Icons.call_split, size: 30),
Icon(Icons.perm_identity, size: 30),
],
color: Colors.white,
buttonBackgroundColor: Colors.white,
backgroundColor: Colors.blueAccent,
animationCurve: Curves.easeInOut,
animationDuration: Duration(milliseconds: 600),
onTap: (index) {
setState(() {
_page = index;
});
},
),
body: Container(
color: Colors.blueAccent,
child: Center(
child: Column(
children:
Text(_page.toString(), textScaleFactor: 10.0),
RaisedButton(
child: Text('Go To Page of index 1'),
onPressed: () {
final CurvedNavigationBarState navBarState =
_bottomNavigationKey.currentState;
navBarState.setPage(1);
},
)
],
),
),
));
}
}
