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

enter image description here

can provide data instead of variable while `AppStyles` is unknown here — Md. Yeasin Sheikh, Feb 20 '23 at 11:25

Shanu · Answer 1 · 2023-02-20T11:52:54.117

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(),
      ),

score 0 · Answer 2 · answered Apr 17 '23 at 08:04

0

you can use "padding 0" and then wrap child with container with custom color

like this:

BottomAppBar(
  padding: EdgeInsets.all(0),
  height: 60,
  child: Container(
    color: Colors.yellow,
    child: Row(...)

answered Apr 17 '23 at 08:04

dasaki.gr

1
2

score 0 · Answer 3 · answered May 09 '23 at 07:23

Just wrap the BottomAppBar with the Theme widget and add useMaterial3: false for ThemeData

Theme(
  data: ThemeData(useMaterial3: false),
  child: BottomAppBar(
    shape: widget.notchedShape,
    color: Colors.green,
    notchMargin: widget.floatingMargin,
    child: Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: items,
    ),
  ),
);

score 0 · Answer 4 · answered May 25 '23 at 09:31

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,

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

4 Answers4