材料3中，BottomAppBar的背景色不变。粉色阴影出现在 BottomAppBar

Question

我将flutter 3.3.10升级到3.7.3。在材料3中，BottomAppBar的背景颜色没有改变。粉红色阴影出现在BottomAppBar的背景中。。并且BottomAppBar和BottomNavigationBar没有合并，它们起作用分别

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

不知道为什么会这样，但是你可以通过在

MaterialApp

的

ThemeData

中设置画布颜色来解决这个问题，就像这样，

MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
        canvasColor: Colors.white,///here
      ),
),

colorScheme

中的

ThemeData

一定有问题 你也可以用这个，

ThemeData(
        useMaterial3: true,
        // canvasColor: Colors.white,
        colorScheme: ColorScheme.highContrastLight(),
      ),