flutter color Api 使用

flutter中得16進制顔色

設計稿給出得顔色通常有這兩種：

#ffffff

和

rgba(55, 1, 200, 0.5)

在flutter中，如果使用

#ffffff

設定顔色，是不能直接設定得。封裝方法如下：

使用 #ffffff 這種16進制顔色

使用方法：

color: HexToColor('#ffffff')

或者

color: HexToColor('ffffff')

工具函數封裝：

// colorUtils.dart
import 'package:flutter/material.dart';

class HexToColor extends Color {
  static int _getColorFromHex(String hexColor) {
    hexColor = hexColor.toUpperCase().replaceAll("#", "");
    // 如果傳入的十六進制顔色值不符合要求，傳回預設值
    if (hexColor == null ||
        hexColor.length != 6 ||
        int.tryParse(hexColor.substring(0, 6), radix: 16) == null) {
      hexColor = '103580';
    }
    hexColor = "FF" + hexColor;
    return int.parse(hexColor, radix: 16);
  }

  HexToColor(final String hexColor) : super(_getColorFromHex(hexColor));
}

           

使用 rgba(55, 1, 200, 0.5)

• 在flutter中，這樣得顔色設定

rgba (Red（紅色）Green（綠色）Blue（藍色）和 Opacity 透明度

color: Color.fromRGBO(55, 1, 200, 1)

flutter使用示例：

FlatButton(
   color: Color.fromRGBO(55, 1, 200, 1),
   child: Text('flatbutton'),
   onPressed: () {
     print('flatbutton');
   },
 ),
           

fromARGB()

flutter 還有一種使用RGB顔色得方法:

color.fromARGB()

.

這種把透明度寫在了最前面，建議建議使用上面兩種書寫方法，與前端css保持一緻.

// a是alpha值，0是透明的，255是完全不透明的。
// R是紅色的，從0到255。
// G是綠色的，從0到255。
// B是藍色的，從0到255。

const Color.fromARGB(
	int a,
	int r,
	int g,
	int b
)
           

參考資料

fromRGBO 函數源碼

fromARGB 函數源碼