Flutter自定义主题颜色
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 { /// 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 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类型的参数。
且通过注释发现：
1、int类型的primary参数应该是一个ARGB值。
2、Map类型的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, { 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, { 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 navigatorKey = GlobalKey();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主题颜色的自定义。
往期内容：
Flutter专栏_WEB前端李志杰的博客-CSDN博客
Vue专栏_WEB前端李志杰的博客-CSDN博客