Flutter 3.7.3 Material 3下BottomAppBar背景色等异常问题求助

问题1：BottomAppBar背景色无法修改、出现粉色阴影 #

在Material 3设计模式下，BottomAppBar的样式受新主题属性影响，按以下方式调整：

1. 直接修改BottomAppBar的surfaceTintColor和shadowColor，消除粉色阴影并确保背景色生效：

   BottomAppBar(
     color: Colors.white,
     surfaceTintColor: Colors.transparent, // 覆盖Material3默认的surface色调
     shadowColor: Colors.transparent, // 移除默认阴影
     // 其他原有属性保留
   )
   

2. 若局部修改无效，可通过全局主题统一配置：
   在MaterialApp的theme中添加：

   theme: ThemeData(
     useMaterial3: true,
     bottomAppBarTheme: const BottomAppBarTheme(
       color: Colors.white,
       surfaceTintColor: Colors.transparent,
       shadowColor: Colors.transparent,
     ),
   )
   

问题2：BottomAppBar与BottomNavigationBar无法融合 #

Material 3下BottomNavigationBar默认带有内边距，导致和BottomAppBar产生间隙，调整以下属性实现融合：

1. 给BottomNavigationBar添加padding: EdgeInsets.zero，消除默认内边距：

   BottomNavigationBar(
     backgroundColor: Colors.white,
     elevation: 0,
     padding: EdgeInsets.zero, // 关键：移除默认内边距
     // 其他原有属性保留
   )
   

2. 移除包裹BottomNavigationBar的SizedBox高度限制，让导航栏自适应高度，避免和BottomAppBar布局冲突。

完整修改后的代码示例 #

import 'package:bottom_navbar/constants/app_assets.dart';
import 'package:bottom_navbar/constants/app_colors.dart';
import 'package:bottom_navbar/constants/app_labels.dart';
import 'package:bottom_navbar/constants/app_styles.dart';
import 'package:bottom_navbar/size_config.dart';
import 'package:flutter/material.dart';

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

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int ci = 0; // 移至build外，避免每次重建重置选中状态
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
          heroTag: AppLabels.addOrEditHero,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
          onPressed: () {},
          backgroundColor: AppColors.colorWhite,
          child: Container(
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(width: 3, color: AppColors.colorWhite)),
            child: Image.asset(
              AppAssets.add,
              fit: BoxFit.cover,
            ),
          )),
      bottomNavigationBar: BottomAppBar(
        color: Colors.white,
        surfaceTintColor: Colors.transparent,
        shadowColor: Colors.transparent,
        shape: const CircularNotchedRectangle(),
        notchMargin: 8,
        clipBehavior: Clip.antiAlias,
        child: BottomNavigationBar(
          backgroundColor: Colors.white,
          elevation: 0,
          padding: EdgeInsets.zero,
          selectedFontSize: 1.4 * SizeConfig.textMultiplier!,
          selectedItemColor: AppColors.primary,
          selectedIconTheme: const IconThemeData(color: AppColors.primary),
          currentIndex: ci,
          unselectedLabelStyle: AppStyles.bottomNavButtonStyle,
          selectedLabelStyle: AppStyles.bottomNavButtonStyle,
          unselectedItemColor: AppColors.menuButton,
          onTap: (i) {
            setState(() {
              ci = i;
            });
          },
          showUnselectedLabels: false,
          type: BottomNavigationBarType.fixed,
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
            BottomNavigationBarItem(
                icon: Icon(Icons.local_activity), label: 'Activity'),
            BottomNavigationBarItem(
                icon: Icon(Icons.notifications), label: 'Notifications'),
            BottomNavigationBarItem(
                icon: Icon(Icons.shopping_bag), label: 'Cart'),
          ],
        ),
      ),
      body: const Center(child: Text('Main Screen')),
    );
  }
}

注：原代码中int ci = 0;放在build方法内部会导致每次页面重建时选中状态重置，已移至State类成员变量中。

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