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

Google recently added something called BottomAppBar and it provides a better way of doing this. Simply add BottomAppBar in the scaffold, create a navigation FAB, and add a label to the FAB if you want it to have text. Creates a result similar to this: https://cdn-images-1.medium.com/max/1600/1*SEYUo6sNrW0RoKxyrYCqbg.png.

Widget build(BuildContext context) {
  return new Scaffold(
    appBar: AppBar(title: const Text('Tasks - Bottom App Bar')),
    floatingActionButton: FloatingActionButton.extended(
      elevation: 4.0,
      icon: const Icon(Icons.add),
      label: const Text('Add a task'),
      onPressed: () {},
    ),
    floatingActionButtonLocation: 
      FloatingActionButtonLocation.centerDocked,
    bottomNavigationBar: BottomAppBar(
      hasNotch: false,
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          )
        ],
      ),
    ),
  );
}