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 函数源码