In meterial 3, the background color of the BottomAppBar does not change. Pink shades appear in the background of the BottomAppBar

Question

I Upgrade flutter 3.3.10 to 3.7.3.In material 3, the background colour of the BottomAppBar does not change.Pink shades appear in the background of the BottomAppBar,BottomStyleSheet etc .and BottomAppBar and BottomNavigationBar do not merge, they act separately see image. It works fine when I switch to the material 2 design, but some animations would benefit from the material 3 design instead.

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

This is happened when you use material3 with elevated widget because of surfaceTintColor parameter , you can fix this be change it to color you want, if you want to hide color just make elevation =0

    surfaceTintColor: Colors.white,
    
    elevation: 0,

Answer 2

Don't know why this happening, but you can fix this issue by setting canvas color in MaterialApp's ThemeData like this,

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

There must be some issue with colorScheme in ThemeData You can also use this,

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