How to use a BottomAppBar for navigation in flutter

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 BottomNavigatio

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

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

Answer 3

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 therms, I don't think it's very beauty to see.

1. Create an auxiliar component, which will have the BottomAppBar.
2. Then, pass a Row as the child method of it
3. Fill with your IconButtons
4. Set the onPressed methods to call the pages (Navigator.of(context).pushName('/yourScreenHere')

Then, every screen you make you can add an AppBar on them.