这里需要先说明的,从 Flutter 2.5 开始,Flutter 团队开始慢慢移除ThemeData 中 primaryColor 属性对所有组件的影响,取而代之的是基于 ColorScheme 的 Color。
因此,在 Flutter 2.5 之后为整个 APP 配置主题颜色,我们需要在 ThemeData 的 colorScheme 属性中使用 ColorScheme 进行主题颜色的配置
class MyApp extends StatelessWidget {const MyApp({super.key});Widget build(BuildContext context) {// 使用容器组件进行包裹便于未来该 APP 成为其他项目子部件的扩展return Container(// APP 组件child: MaterialApp(title: '移动商城',// 去除应用界面中的 DEBUG 标记debugShowCheckedModeBanner: false,// 配置 APP 的主题theme: ThemeData(// 配置颜色方案,使用 Flutter 提供的亮色主题的方案colorScheme: ColorScheme.light(// 修改亮色主题的主题颜色primary: Colors.pink)),// 指定 APP 的主页home: IndexPage(),),);}
}
我们通过上述方式为整个 APP 配置完成主题颜色之后,可能只有部分的组件会默认使用配置的主题颜色,可能会存在部分的组件默认情况下不会应用配置的主题颜色,如 AppBar
所以,此时对于 APP 主题颜色配置之后没有生效的组件来说,我们需要组件中主动使用我们为 App 配置的主题颜色
import 'package:flutter/material.dart';/// 首页
class IndexPage extends StatelessWidget {const IndexPage({super.key});Widget build(BuildContext context) {return Scaffold(// 应用顶部导航条appBar: AppBar(title: Text('移动商城'),// 背景颜色:从 App 上下文中获取主题,使用主题中配置的颜色方案中的主要颜色backgroundColor: Theme.of(context).colorScheme.primary,),body: TextButton(onPressed: () => {},child: Text('123123'),),);}
}