Flutter只需要修改MaterialApp
构造器中ThemeData
的primarySwatch
和primaryColor
值即可实现主题颜色的自定义。
需要注意的是:
primaryColor
的值是一个Color
类型的,为所有的Widget
提供基础颜色;primarySwatch
的值是一个MaterialColor
类型,而不是Color类型的,主要为Material
系列组件提供基础色。
所以想要自定义主题颜色我们主要修改primarySwatch
和primaryColor
的值就行。
primaryColor
我们可以简单的直接修改,但是由于primarySwatch
的值不是Color
类型,目前系统颜色也只支持以下参数:
Colors.red,
Colors.pink,
Colors.purple,
Colors.deepPurple,
Colors.indigo,
Colors.blue,
Colors.lightBlue,
Colors.cyan,
Colors.teal,
Colors.green,
Colors.lightGreen,
Colors.lime,
Colors.yellow,
Colors.amber,
Colors.orange,
Colors.deepOrange,
Colors.brown,
Colors.blueGrey,
其余的值大部分会提示如下错误。
The argument type 'Color' can't be assigned to the parameter type 'MaterialColor?'.
所以,如果想要完全实现自定义主题颜色,我们就需要研究primarySwatch
如何修改,由于primarySwatch
的值为MaterialColor
,所以我们先看一下MaterialColor
到底是怎么定义的。
// MaterialColor定义的源码,只是删除了换行
class MaterialColor extends ColorSwatch<int> {
/// Creates a color swatch with a variety of shades.
///
/// The `primary` argument should be the 32 bit ARGB value of one of the
/// values in the swatch, as would be passed to the [new Color] constructor
/// for that same color, and as is exposed by [value]. (This is distinct from
/// the specific index of the color in the swatch.)
const MaterialColor(int primary, Map<int, Color> swatch) : super(primary, swatch);
/// The lightest shade.
Color get shade50 => this[50]!;
/// The second lightest shade.
Color get shade100 => this[100]!;
/// The third lightest shade.
Color get shade200 => this[200]!;
/// The fourth lightest shade.
Color get shade300 => this[300]!;
/// The fifth lightest shade.
Color get shade400 => this[400]!;
/// The default shade.
Color get shade500 => this[500]!;
/// The fourth darkest shade.
Color get shade600 => this[600]!;
/// The third darkest shade.
Color get shade700 => this[700]!;
/// The second darkest shade.
Color get shade800 => this[800]!;
/// The darkest shade.
Color get shade900 => this[900]!;
}
通过源码阅读可以发现MaterialColor
构造函数接收一个int
类型和一个Map<int, Color>
类型的参数。
且通过注释发现:
1、int
类型的primary
参数应该是一个ARGB值。
2、Map<int, Color>
类型的swatch
参数的索引须是50、100、200、300、400、500、600、700、800、900,其对应的值是一个Color
类型的参数。
注:如何定义ARGB颜色值,而且ARGB颜色值的类型为
int
型。举例:
正常的红色十六进制的颜色值为#FF0000
,那么对应的ARGB颜色值就为0xFFFF0000
;
正常的绿色十六进制的颜色值为#00FF00
,那么对应的ARGB颜色值就为0xFF00FF00
;规律:ARGB颜色值=
0xFF
+去掉#
的十六进制的颜色值。
我们可以查看primarySwatch
的值Colors.red
的源码是如何定义的,发现如下代码:
static const MaterialColor red = MaterialColor(
_redPrimaryValue,
<int, Color>{
50: Color(0xFFFFEBEE),
100: Color(0xFFFFCDD2),
200: Color(0xFFEF9A9A),
300: Color(0xFFE57373),
400: Color(0xFFEF5350),
500: Color(_redPrimaryValue),
600: Color(0xFFE53935),
700: Color(0xFFD32F2F),
800: Color(0xFFC62828),
900: Color(0xFFB71C1C),
},
);
static const int _redPrimaryValue = 0xFFF44336;
那么,我们就可以仿照源码将主题颜色修改为任意颜色的值。
在全局配置中定义主题颜色
// 全局配置
class Config {
/// 主题颜色
static const int _primaryColorValue = 0xFF166EC9;
static const Color primaryColor = Color(_primaryColorValue);
static const MaterialColor primarySwatchColor = MaterialColor(
_primaryColorValue,
<int, Color>{
50: Color(0xFFD1E3F6),
100: Color(0xFFA7C9ED),
200: Color(0xFF7EB0E4),
300: Color(0xFF5999DB),
400: Color(0xFF3683D2),
500: Color(_primaryColorValue),
600: Color(0xFF1258A1),
700: Color(0xFF0d4279),
800: Color(0xFF092C50),
900: Color(0xFF041628),
},
);
/// 其他全局配置
……
}
在应用入口处配置:
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
key: navigatorKey,
debugShowCheckedModeBanner: false,
title: 'Flutter APP',
theme: ThemeData(
primaryColor: Config.primaryColor,
primarySwatch: Config.primarySwatchColor,
buttonTheme: const ButtonThemeData(
buttonColor: Config.primaryColor,
textTheme: ButtonTextTheme.normal)),
// 其他主题颜色,根据项目需要定义即可
……
initialRoute: 'login');
}
}
至此,我们已经完成了对Flutter主题颜色的自定义。