Flutter开发：如何移除底部导航栏的阴影/高亮效果？

你看到的这个效果是Scaffold默认在body和bottomNavigationBar之间添加的阴影分隔，即使给BottomNavigationBar设置了elevation: 0也可能存在，试试下面两种解决方式：

方法一：启用Scaffold的extendBody属性 #

这个属性会让页面body延伸至底部导航栏下方，直接消除两者间的视觉分隔：

@override
Widget build(BuildContext context) {
  return Scaffold(
    extendBody: true, // 新增该行
    body: child,
    bottomNavigationBar: BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Feed',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.groups),
          label: 'Groups',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: 'Profile',
        ),
      ],
      currentIndex: _calculateSelectedIndex(context),
      onTap: (int idx) => _onItemTapped(idx, context),
      elevation: 0,
    ),
  );
}

方法二：统一背景色并确保无 elevation #

如果方法一不适用，直接让BottomNavigationBar的背景色和Scaffold的body背景色一致，同时保留elevation: 0：

bottomNavigationBar: BottomNavigationBar(
  backgroundColor: Theme.of(context).scaffoldBackgroundColor, // 匹配页面背景色
  elevation: 0,
  // 其余属性保持不变
)

内容的提问来源于stack exchange，提问作者splurring