Flutter 使用自定义颜色

theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
          primarySwatch: Colors.blue,
   
      )

Colors.blue 点进去源码

static const MaterialColor blue = MaterialColor(
    _bluePrimaryValue,
    <int, Color>{
       50: Color(0xFFE3F2FD),
      100: Color(0xFFBBDEFB),
      200: Color(0xFF90CAF9),
      300: Color(0xFF64B5F6),
      400: Color(0xFF42A5F5),
      500: Color(_bluePrimaryValue),
      600: Color(0xFF1E88E5),
      700: Color(0xFF1976D2),
      800: Color(0xFF1565C0),
      900: Color(0xFF0D47A1),
    },
  );

所以我们想在使用颜色值的时候可以直接这样使用+

primarySwatch: Colors.blue[200],
          primaryColor: Color(0xFF90CAF9),

他们俩指向了同一个颜色

习惯android开发的 都知道。。

颜色要提取出来@color/color_ff90caf9

这才叫专业。。。

Flutter 如何完成这个操作呢

新建res/my_colors.dart

import 'package:flutter/material.dart';
class MyColors {
  static const Color color_ff90caf9 = Color(0xff90caf9);
}

类似于android的专业代码就产生了

primarySwatch: Colors.blue[200],
          primaryColor: Color(0xFF90CAF9),
          primaryColorLight: MyColors.color_ff90caf9