BottomAppBar Floating action button notch/inset is not transparent

Question

I've added a BottomAppBar to scaffold in a materialApp, and to that I've added a fab with a inset at the center. The code looks somewhat like this

Scaffold(
    bottomNavigationBar: BottomAppBar(
        color: Theme.of(context).accentColor,
        shape: CircularNotchedRectangle(),
        child: _buildBottomBar(context),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
        backgroundColor: Theme.of(context).primaryColor,
        child: Center(
        child: Icon(
            Icons.add,
            size: 32.0,
        ),
        ),
        onPressed: () {
        Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => CreateEvent()),
        );
        },
    ),
)

And this is what I'm getting after rendering:

The notch is not transparent, and the content behind it is getting hidden.

Is there a way to fix this? Something I might have missed?

Answer 1

You just need to be on the flutter channel: master and then add to Scaffold:

Scaffold(
   extendBody: true
);

and it should be transparent :)

Greets

Rebar

UPDATE:

You don't need to be on master channel. It's included everywhere :)