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

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')),
    );
  }
}