Flutter如何移除底部导航栏下方白色背景并设置为透明

你可以通过以下修改移除底部导航栏下方的白色背景：

• 给BottomAppBar添加elevation: 0，消除默认阴影效果（这大概率是你看到的白色区域来源）
• 设置surfaceTintColor: Colors.transparent，避免Material 3默认的表面着色层干扰
• 若页面主体背景非默认白色，可同步设置Scaffold的backgroundColor匹配页面背景

修改后的完整代码：

return GetBuilder<MainPageController>(
  builder: (controller) => Scaffold(
    extendBody: true,
    // 可选：如果页面主体背景不是默认白色，取消注释并设置对应颜色
    // backgroundColor: 你的页面背景色,
    bottomNavigationBar: Container(
      padding: EdgeInsets.all(15),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(40),
        child: BottomAppBar(
          elevation: 0, // 移除导航栏阴影
          surfaceTintColor: Colors.transparent, // 移除Material 3表面着色层
          height: 90,
          color: AppColor.buttononbording,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: List.generate(
              controller.listPage.length,
              (index) {
                bool isCenterButton = index == 2;
                return ButtonBottomAppbarWidget(
                  sizeicon: isCenterButton ? 30 : 20,
                  padding: isCenterButton ? 10 : 2,
                  text: isCenterButton
                      ? null
                      : controller.namescreen[index]["title"],
                  icon: controller.namescreen[index]["icon"],
                  onPressed: () {
                    controller.changePage(index);
                  },
                  active: isCenterButton
                      ? false
                      : controller.currentpage == index,
                  center: isCenterButton ? Colors.blue : Colors.transparent,
                );
              },
            ),
          ),
        ),
      ),
    ),
    body: controller.listPage.elementAt(controller.currentpage),
  ),
);

同时请确认controller.listPage中的页面组件已设置正确的背景色，确保页面能延伸到底部导航栏下方，避免出现白色间隙。

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