flutter_hex_color如何使用

在Flutter项目中如何使用flutter_hex_color插件？我尝试通过HexColor('#FFFFFF')来转换颜色，但总是报错"Invalid color value"。文档中说支持3/6/8位十六进制色值，但我传入#FFF、#FFFFFF和#FFFFFFFF都不起作用。请问正确的使用方法是什么？是否需要先进行初始化或其他配置？

2 回复

flutter_hex_color 是一个用于在 Flutter 中将十六进制颜色字符串转换为 Color 对象的库。

使用方法：

  1. 添加依赖
    在 pubspec.yaml 中添加：

    dependencies:
  flutter_hex_color: ^3.0.1

  2. 导入包

    import 'package:flutter_hex_color/flutter_hex_color.dart';

  3. 使用示例

    // 6位十六进制（默认不透明）
Color color1 = HexColor("FF0000"); // 红色

// 8位十六进制（带透明度）
Color color2 = HexColor("80FF0000"); // 半透明红色

// 直接用在组件中
Container(
  color: HexColor("#42A5F5"), // 支持带#号
  width: 100,
  height: 100,
)

注意事项：

  • 支持格式："RRGGBB"、"#RRGGBB"、"AARRGGBB"
  • 字符串不区分大小写
  • 从 3.0.0 开始支持空安全

替代方案： 如果不想引入库，也可用 Flutter 原生方法：

Color(0xFF42A5F5) // 0xFF + 六位色值

更多关于flutter_hex_color如何使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_hex_color 是一个用于在 Flutter 中将十六进制颜色代码转换为 Color 对象的库。以下是使用方法：

  1. 添加依赖
    在 pubspec.yaml 的 dependencies 中添加：

    dependencies:
  flutter_hex_color: ^2.0.7  # 检查最新版本

    运行 flutter pub get。

  2. 基本用法

    import 'package:flutter_hex_color/flutter_hex_color.dart';

// 6位十六进制（默认不透明）
Color color1 = HexColor("FF0000"); // 红色

// 8位十六进制（含透明度）
Color color2 = HexColor("80FF0000"); // 半透明红色

// 使用方式示例
Container(
  color: HexColor("#FFC107"), // 支持带#号
  child: Text("Hello", style: TextStyle(color: HexColor("303030"))),
)

  3. 从字符串创建

    String hexCode = "1a2b3c";
Color color = HexColor.fromHex(hexCode);

  4. 转换为十六进制

    Color color = Colors.blue;
String hex = color.toHexString(); // 返回8位字符串（含透明度）
String hexNoAlpha = color.toHexString(leadingHash: false, alpha: false);

注意事项：

  • 支持 6 位（不透明）和 8 位（含透明度）格式
  • 字符串可包含 # 号（自动过滤）
  • 确保颜色值格式正确（如长度必须为 6 或 8）

适用于快速处理十六进制颜色值，避免手动解析的麻烦。

回到顶部