Flutter 使用十六进制色值

一般 UI 给到我们前端开发者的色值是 #FFFFFF 这样的十六进制的色值编码，那么我们如何将它转换成 Flutter 认识的色值呢？

Flutter中的色值创建方式

由上面 Flutter 提供的方法中我们可以看到，我们的任务就是思考如何把#FFFFFF 转换成 r，g，b。 int r, int g, int b是 0-255 的取值范围内的值。

下面提供两种转换方式，具体看代码。

import 'package:flutter/material.dart';

class ColorsUtil {
  /// 十六进制颜色
  /// hex，十六进制值，例如：0xffffff，
  /// alpha，透明度[0.0, 1.0]
  static Color hexColor(int hex, {double alpha = 1}) {
    if (alpha < 0) {
      alpha = 0;
    } else if (alpha > 1) {
      alpha = 1;
    }
    return Color.fromRGBO((hex & 0xFF0000) >> 16, (hex & 0x00FF00) >> 8,
        (hex & 0x0000FF) >> 0, alpha);
  }

  /// 十六进制颜色
  /// colorString，字符串，例如：'0x000000'  '0xff000000' '#000000' '#000000'，
  /// alpha，透明度[0.0, 1.0]
  static Color hexStringColor(String colorString, {double alpha = 1}) {
    if (alpha < 0) {
      alpha = 0;
    } else if (alpha > 1) {
      alpha = 1;
    }
    String colorStr = colorString;
    // colorString未带0xff前缀并且长度为6
    if (!colorStr.startsWith('0xff') && colorStr.length == 6) {
      colorStr = '0xff' + colorStr;
    }
    // colorString为8位，如0x000000
    if (colorStr.startsWith('0x') && colorStr.length == 8) {
      colorStr = colorStr.replaceRange(0, 2, '0xff');
    }
    // colorString为7位，如#000000
    if (colorStr.startsWith('#') && colorStr.length == 7) {
      colorStr = colorStr.replaceRange(0, 1, '0xff');
    }
    // 先分别获取色值的RGB通道
    Color color = Color(int.parse(colorStr));
    int red = color.red;
    int green = color.green;
    int blue = color.blue;
    // 通过fromRGBO返回带透明度和RGB值的颜色
    return Color.fromRGBO(red, green, blue, alpha);
  }
}

如上所示，一种通过 进制计算，另一个种利用 Flutter 提供的 Color 类来获取。