ExtendBody not working with BottomAppBar - Flutter

Question

How can I extend the body when using BottomAppBar? I added the extendBody property to Scaffold, but the scaffold background color still appears in the notch area.

My code like this:

class BottomNavbar extends StatefulWidget {
  const BottomNavbar({super.key});

  @override
  State<BottomNavbar> createState() => _BottomNavbarState();
}

class _BottomNavbarState extends State<BottomNavbar> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  final List _widgetOptions = [
    const Dashboard(),
    const Dashboard(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      body: _widgetOptions[_selectedIndex],
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        backgroundColor: AppColors.primary,
        shape: const CircleBorder(
          side: BorderSide(
            color: AppColors.primary,
          ),
        ),
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: BottomAppBar(
        height: context.dynamicHeight(0.07),
        shadowColor: Colors.transparent,
        shape: const CircularNotchedRectangle(),
        surfaceTintColor: AppColors.secondary,
        color: AppColors.secondary,
        notchMargin: 20,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(
              onPressed: () {
                _onItemTapped(0);
              },
              icon: const Icon(Icons.home),
            ),
            IconButton(
              onPressed: () {
                _onItemTapped(1);
              },
              icon: const Icon(Icons.search),
            ),
          ],
        ),
      ),
    );
  }
}

EDIT!!! I found out it caused by SafeArea widget. I changed bottom property to false and background color disappeared.

Answer 1

I think you should try it with a stack widget, that could solve this problem , use stack widget in the body like this

class BottomNavbar extends StatefulWidget {
const BottomNavbar({super.key});

@override 
State<BottomNavbar> createState() => _BottomNavbarState(); 
}

class _BottomNavbarState extends State<BottomNavbar> {
 int _selectedIndex = 0;

void _onItemTapped(int index) {
setState(() {
  _selectedIndex = index;
  });
 }

 final List _widgetOptions = [
 const Dashboard(),
 const Dashboard(),
 ];

 @override
 Widget build(BuildContext context) {
 return Scaffold(
  extendBody: true,
  body: Stack(
    children: [
      Positioned.fill(
        child: _widgetOptions[_selectedIndex],
      ),
      Align(
        alignment: Alignment.bottomCenter,
        child: BottomAppBar(
          height: context.dynamicHeight(0.07),
          shadowColor: Colors.transparent,
          shape: const CircularNotchedRectangle(),
          surfaceTintColor: AppColors.secondary,
          color: AppColors.secondary,
          notchMargin: 20,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              IconButton(
                onPressed: () {
                  _onItemTapped(0);
                },
                icon: const Icon(Icons.home),
              ),
              IconButton(
                onPressed: () {
                  _onItemTapped(1);
                },
                icon: const Icon(Icons.search),
              ),
            ],
          ),
        ),
      ),
     ],
   ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    backgroundColor: AppColors.primary,
    shape: const CircleBorder(
      side: BorderSide(
        color: AppColors.primary,
      ),
    ),
    child: const Icon(Icons.add),
    ),
   );
  } 
 }