How to add button to bottom navigation bar which hang out above - Flutter

Question

I have bottom navigation bar with center item that looks like on this picture:

How to implement such a thing in Flutter?

I found that every icon that I put into BottomNavigatonBarItem is fitted inside navigation bar's bounds. But I need it to be hanged out above.

Answer 1

You can also do this using FloatingActionButtonLocation and Expanded widget like this:

Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: _buildTodoList(),
      floatingActionButton: new FloatingActionButton(
        onPressed: _pushAddTodoScreen,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
        elevation: 4.0,
      ),
      bottomNavigationBar: BottomAppBar(
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(child: IconButton(icon: Icon(Icons.home)),),
            Expanded(child: IconButton(icon: Icon(Icons.show_chart)),),
            Expanded(child: new Text('')),
            Expanded(child: IconButton(icon: Icon(Icons.tab)),),
            Expanded(child: IconButton(icon: Icon(Icons.settings)),),
          ],
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

Preview:

Answer 2

You can a Stack to display widgets on the top of each others. Combined with the property overflow: Overflow.visible, and an alignment that fits your need.

The following example will achieve thing as in your picture : A floating button horizontally centered, top aligned with the bottom bar.

return new Scaffold(
  bottomNavigationBar: new Stack(
    overflow: Overflow.visible,
    alignment: new FractionalOffset(.5, 1.0),
    children: [
      new Container(
        height: 40.0,
        color: Colors.red,
      ),
      new Padding(
        padding: const EdgeInsets.only(bottom: 12.0),
        child: new FloatingActionButton(
          notchMargin: 24.0,
          onPressed: () => print('hello world'),
          child: new Icon(Icons.arrow_back),
        ),
      ),
    ],
  ),
);