在材质3中，BottomAppBar的背景颜色没有改变。粉色阴影出现在 BottomAppBar 的背景中

Question

我将flutter 3.3.10升级到3.7.3。在材质3中，BottomAppBar的背景颜色没有改变。BottomAppBar、BottomStyleSheet等的背景出现粉红色阴影。并且BottomAppBar和BottomNavigationBar不合并，它们单独作用 see image。当我切换到材质 2 设计时，效果很好，但有些动画会受益于材质 3 设计。

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> {
  @override
  Widget build(BuildContext context) {
    int ci = 0;
    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.white,
        shape: const CircularNotchedRectangle(),
        notchMargin: 8,
        clipBehavior: Clip.antiAlias,
        child: SizedBox(
          height: 8 * SizeConfig.textMultiplier!,
          child: BottomNavigationBar(
            backgroundColor: Colors.white,
            elevation: 0,
            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')),
    );
  }
}

Answer 1

当您将material3与提升的小部件一起使用时，由于surfaceTintColor参数，会发生这种情况，您可以通过将其更改为您想要的颜色来修复此问题，如果您想隐藏颜色，只需将elevation = 0

    surfaceTintColor: Colors.white,
    
    elevation: 0,