Flutter中使用BottomAppBar时extendBody属性不生效问题

我已经给Scaffold添加了extendBody: true属性，但底部凹口区域仍然显示Scaffold的背景色，无法让页面内容延伸到底部。

我的代码如下：

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),
            ),
          ],
        ),
      ),
    );
  }
}

问题解决 #

经过排查，问题根源是页面内容中使用的SafeArea组件。将SafeArea的bottom属性设置为false后，底部凹口区域的背景色问题就消失了，页面内容可以正常延伸到底部。

内容的提问来源于stack exchange，提问作者Mehmet Güler