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<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主题颜色的自定义。

往期内容：

Flutter专栏_WEB前端李志杰的博客-CSDN博客

Vue专栏_WEB前端李志杰的博客-CSDN博客