我把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')),
);
}
}
1条答案
按热度按时间bvjveswy1#
不知道为什么会发生这种情况,但您可以通过在
MaterialApp
的ThemeData
中设置画布颜色来解决这个问题,如下所示:ThemeData
中的colorScheme
一定有问题您也可以使用此函数,