Flutter color顏色用法

系統的color

查看Color的源碼：

static const Color black = Color(0xFF000000);

可以看到，這裏的black也是賦值封裝好的，我們可以直接調用（Colors.black 即可）。

當然系統也封裝了很多的color使用（查看源碼輕鬆找到），

上面我們可以看到有很多不同程度的紅色，默認就是原始的紅色，我們加一個參數就可以調用其他的紅色了

primaryColor: Colors.red[800]

在中括號後面加一個數值就行了

但是如果我想自定義怎麼辦呢，那源碼就是學習的例子，我們可以向源碼一樣封裝，然後調用

 

自定義color

import 'package:flutter/material.dart';

class YColors {
  static const Color colorPrimary = Color(0xff4caf50);
  static const Color colorPrimaryDark = Color(0xff388E3C);
  static const Color colorAccent = Color(0xff8BC34A);
  static const Color colorPrimaryLight = Color(0xffC8E6C9);

  static const Color primaryText = Color(0xff212121);
  static const Color secondaryText = Color(0xff757575);

  static const Color dividerColor = Color(0xffBDBDBD);
}

調用：

theme: ThemeData(
     ...
     primaryColor: YColors.colorPrimary,
     primaryColorDark: YColors.colorPrimaryDark,
     accentColor: YColors.colorAccent,
     dividerColor: YColors.dividerColor,
),

不過這裏注意color的值，不是#ff0000格式的了，是ARGB格式的

什麼是ARGB

在flutter中，color使用的是ARGB，0x後面的就是ARGB，A就是FF表示透明度，RGB就是三原色了，

比如，RGB的紅色是#ff0000

所以，ARGB紅色我們就可以這樣表示

0xffff0000

我們除了改主題的顏色之外，還有很多系統的控件顏色都可以修改的，查看源碼ThemeData即可。