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

Answer 1

The problem is if you put your content in the body of Scaffold it won't overlap the size of your AppBar, BottomAppBar.

You can try using Stack, put your body as a first child, then put the Scaffold, change the backgroundColor as Transparent.

        @override
          Widget build(BuildContext context) {
            return Stack(
              children: [
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Image.network(
                      "https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&h=350"),
                ),
                Scaffold(
                  backgroundColor: Colors.transparent,
                  bottomNavigationBar: BottomAppBar(
                    color: Theme.of(context).accentColor,
                    shape: CircularNotchedRectangle(),
                    child: Row(
                      children: [
                        IconButton(
                          icon: Icon(Icons.access_alarm),
                          onPressed: () => null,
                        ),
                        IconButton(
                          icon: Icon(Icons.sms_failed),
                          onPressed: () => null,
                        ),
                      ],
                    ),
                  ),
                  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()),
                    );*/
                    },
                  ),
                ),
              ],
            );