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

Answer 1

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