How to use a BottomAppBar for navigation in flutter - dart

Question

Im fairly new to flutter,
I have created a nice BottomAppBar with a docked FAB however i also want to use this AppBar for page navigation. I've tried it with a BottomNavigationBar but then i lose the docked floating action button. How can i implement navigation into the bottom app bar??
floatingActionButton: Container(
height: 65.0,
width: 65.0,
child: FittedBox(
child: FloatingActionButton(
onPressed: (){},
child: Icon(Icons.add, color: Colors.white,),
// elevation: 5.0,
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
// elevation: 20.0,
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(() {
currentIndex = 0;
});
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(right: 28.0),
icon: Icon(Icons.search),
onPressed: () {
setState(() {
currentIndex = 1;
print("${currentIndex}");
});
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.notifications),
onPressed: () {
setState(() {
currentIndex = 2;
print("${currentIndex}");
});
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(right: 28.0),
icon: Icon(Icons.list),
onPressed: () {
setState(() {
currentIndex = 3;
print("${currentIndex}");
});
},
)
],
),
)
)

Answer 1

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,
),
),
),
);
}
}

Answer 2

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.

Answer 3

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. :)