How to use a BottomAppBar for navigation in flutter
The difference between the BottomAppBar
and the BottomNavigationBar
, is that with the last one, you can set a list of children (pages) to be rendered as you click on the icons below (onTap method). With the BottomAppBar
, you have to set a Navigator
method, speaking in UI/UX terms, I don't think it's very beauty to see.
- Create an auxiliar component, which will have the BottomAppBar.
- Then, pass a Row as the child method of it
- Fill with your IconButtons
- Set the onPressed methods to call the pages
(Navigator.of(context).pushName('/yourScreenHere')
Then, for every screen you make you can add an AppBar on them.
One Way of Doing it is with - PageView
widget.
Example Code with your Coded BottomAppBar
.
class _DemoPageState extends State<FormPage> {
PageController _myPage = PageController(initialPage: 0);
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
child: Container(
height: 75,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.home),
onPressed: () {
setState(() {
_myPage.jumpToPage(0);
});
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(right: 28.0),
icon: Icon(Icons.search),
onPressed: () {
setState(() {
_myPage.jumpToPage(1);
});
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.notifications),
onPressed: () {
setState(() {
_myPage.jumpToPage(2);
});
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(right: 28.0),
icon: Icon(Icons.list),
onPressed: () {
setState(() {
_myPage.jumpToPage(3);
});
},
)
],
),
),
),
body: PageView(
controller: _myPage,
onPageChanged: (int) {
print('Page Changes to index $int');
},
children: <Widget>[
Center(
child: Container(
child: Text('Empty Body 0'),
),
),
Center(
child: Container(
child: Text('Empty Body 1'),
),
),
Center(
child: Container(
child: Text('Empty Body 2'),
),
),
Center(
child: Container(
child: Text('Empty Body 3'),
),
)
],
physics: NeverScrollableScrollPhysics(), // Comment this if you need to use Swipe.
),
floatingActionButton: Container(
height: 65.0,
width: 65.0,
child: FittedBox(
child: FloatingActionButton(
onPressed: () {},
child: Icon(
Icons.add,
color: Colors.white,
),
// elevation: 5.0,
),
),
),
);
}
}
You can use a switch case
for your body using the same scaffold - Like in tabcontroller
or radiobutton
.
Just update the body when bottomAppBar icon is pressed.
Check out this link for better understanding. :)