Flutter SnackBar is being Shown over Expandable Widget

Question

i'm using expandable_bottom_bar dependency to create that expanded behaviour in my AppBottomBar. But for some reason, whenever I show a SnackBar it's rendering above the AppBottomBar... Any thoughts?

Its a simple Scaffold where I only use the BottomExpandableAppBar widget from the dependency and I styled the middle Floating Action button...

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const Center(
        child: Text("HOME SCREEN"),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: GestureDetector(
        onVerticalDragUpdate: DefaultBottomBarController.of(context)
            .onDrag, //Caso queiram voltar com a funcionalidade de arrastar
        onVerticalDragEnd: DefaultBottomBarController.of(context).onDragEnd,
        child: FloatingActionButton(
          onPressed: () => DefaultBottomBarController.of(context).swap(),
          elevation: 4,
          foregroundColor: Colors.white,
          child: AnimatedBuilder(
            animation: DefaultBottomBarController.of(context).state,
            builder: (context, child) => Container(
                child: (DefaultBottomBarController.of(context).isOpen)
                    ? menuEasyLogoButtom
                    : wavesEasyLogoButtom),
          ),
        ),
      ),
      bottomNavigationBar: BottomExpandableAppBar(
        expandedHeight: 340,
        bottomOffset: 0,
        expandedDecoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: ThemeColors.backGroundColor,
            boxShadow: <BoxShadow>[
              BoxShadow(
                color: Colors.black.withOpacity(0.2),
                offset: const Offset(0, 5),
                spreadRadius: 2,
                blurRadius: 9,
              )
            ]),
        expandedBody: const ExpandedDashBoardIcons(),
        shape: const AutomaticNotchedShape(
            RoundedRectangleBorder(), StadiumBorder(side: BorderSide())),
        bottomAppBarBody: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 64.0),
              child: InkWell(
                onTap: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                        content:
                            Text("This is not supossed to be shown here...")),
                  );
                },
                child: const Icon(
                  Icons.monetization_on_outlined,
                  size: 33.33,
                  color: ThemeColors.primaryFontColor,
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(right: 64.0),
              child: InkWell(
                  onTap: () {},
                  child: const Icon(
                    Icons.sailing_rounded,
                    size: 33.33,
                    color: ThemeColors.primaryFontColor,
                  )),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

the solution of this situation is easy .

1. wrap your Center widget with a Stack()
2. put your BottomNavigationBar widget inside a Positioned() and give it bottom : 0

here is the code copy and paste it :

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
       children : [
        const Center(
        child: Text("HOME SCREEN"),),
        Positioned(
            bottom:0,
            child:BottomExpandableAppBar(
        expandedHeight: 340,
        bottomOffset: 0,
        expandedDecoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: ThemeColors.backGroundColor,
            boxShadow: <BoxShadow>[
              BoxShadow(
                color: Colors.black.withOpacity(0.2),
                offset: const Offset(0, 5),
                spreadRadius: 2,
                blurRadius: 9,
              )
            ]),
        expandedBody: const ExpandedDashBoardIcons(),
        shape: const AutomaticNotchedShape(
            RoundedRectangleBorder(), StadiumBorder(side: BorderSide())),
        bottomAppBarBody: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 64.0),
              child: InkWell(
                onTap: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                        content:
                            Text("This is not supossed to be shown here...")),
                  );
                },
                child: const Icon(
                  Icons.monetization_on_outlined,
                  size: 33.33,
                  color: ThemeColors.primaryFontColor,
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(right: 64.0),
              child: InkWell(
                  onTap: () {},
                  child: const Icon(
                    Icons.sailing_rounded,
                    size: 33.33,
                    color: ThemeColors.primaryFontColor,
                  )),
            ),
          ],
        ),
      ),
        ),
        ]),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: GestureDetector(
        onVerticalDragUpdate: DefaultBottomBarController.of(context)
            .onDrag, //Caso queiram voltar com a funcionalidade de arrastar
        onVerticalDragEnd: DefaultBottomBarController.of(context).onDragEnd,
        child: FloatingActionButton(
          onPressed: () => DefaultBottomBarController.of(context).swap(),
          elevation: 4,
          foregroundColor: Colors.white,
          child: AnimatedBuilder(
            animation: DefaultBottomBarController.of(context).state,
            builder: (context, child) => Container(
                child: (DefaultBottomBarController.of(context).isOpen)
                    ? menuEasyLogoButtom
                    : wavesEasyLogoButtom),
          ),
        ),
      ),
    );
  }
}