flutter 在材料3中,BottomAppBar的背景颜色没有改变,粉红色阴影出现在BottomAppBar的背景中

chhqkbe1  于 2023-02-25  发布在  Flutter
关注(0)|答案(1)|浏览(360)

我把flutter 3.3.10升级到3.7.3。在材质3中,底部应用栏的背景颜色没有改变。粉色阴影出现在底部应用栏、底部样式表等的背景中,底部应用栏和底部导航栏没有合并,它们单独作用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')),
    );
  }
}

bvjveswy

bvjveswy1#

不知道为什么会发生这种情况,但您可以通过在MaterialAppThemeData中设置画布颜色来解决这个问题,如下所示:

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

ThemeData中的colorScheme一定有问题您也可以使用此函数,

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

相关问题