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

In addition to the inputs by @Raunak, you can also use the "border" attribute of the FloatingActionButton to get a seamless border to generate the desired effect - code snippet is below:

Widget buildFab() {
  FloatingActionButton fab = FloatingActionButton(
    backgroundColor: Color(0xFF9966CC),
    child: Icon(Icons.add),
    shape: CircleBorder(
      side: BorderSide(
        color: Colors.white,
        width: 3.0,
      ),
    ),
    tooltip: "Add...",
    onPressed: () {
      print("fab is pressed!!!");
    }
  );

  return fab;
}

More better if you wrap the FAB inside a Material and add shadow effects to it - as below:

Material buildFabWithShadow() {
  return Material(
  shadowColor: Color(0x802196F3),
  shape: CircleBorder(), 
  elevation: 16.0,
  child: buildFab(),
);

When tried, I got the below for effect 1- please note that the Border width can be adjusted to your wish!