dev_prokit 之字符串快速转颜色

往期优选推荐

1. Fam 最简单的 Flutter 项目 Assets 管理脚本服务

推荐指数: ⭐️⭐️⭐️⭐️⭐️

》fam 和 flutter_gen 相比优点《

fam 不需要在项目的 pubspec.yaml 文件的 dev_dependencies 引入任何东西；而 flutter_gen 需要引入 flutter_gen_runner。
fam 在导入资源后只需要执行 fam run 即可；而 flutter_gen 需要执行 dart run build_runner build 。需要注意的是 dart run build_runner build 是很多代码自动生成的运行指令（多语言、json解析、rividerpod...等）。所以一旦执行就需要很长时间才能完成，而 fam 拥有独立的体系，便捷快速！
fam 的资源管理类在项目中使用简短；而 flutter_gen 需要使用.语法一直到资源文件，然后再通过 .path 获取资源路径，这很麻烦！
fam 拥有独立的系统体系； flutter_gen 和多语言的使用有一定的冲突。

2. dev_prokit 全部功能目录

推荐指数: ⭐️⭐️⭐️⭐️⭐️

该篇文章包含了 dev_prokit 所有功能介绍和示例的目录。此文章能够让开发者快速的了解 dev_prokit 都提供了那些功能，以及能更快速的找到自己需要的功能介绍和应用。

本期功能介绍

一、起因

在 flutter 项目开发中，颜色的使用是必不可少的。官方为开发者提供了颜色生成的几种方法，例如:

const Color(int value)
const Color.fromARGB(int a, int r, int g, int b)
const Color.fromRGBO(int r, int g, int b, double opacity)

这些生成颜色的方法需要一个 int类型的数值或者 红r、绿g、蓝b基本色值以及不透明度 opacity 和透明度 alpha 等值。然而，蓝湖、MasterGo 等设计网站提供给我们的颜色值确不是我们想要的。例如:

HEX(#5E37D4)
AHEX(#ff5E37D4)
HEXA(#5E37D4ff)
RGB(rgba(94, 55, 212, 1))
HSLA(hsla(255, 65%, 52%, 1))
HSBA(hsba(255, 74%, 83%, 1))
SCSS(rgba(#5E37D4, 1))

这些数值在拷贝后都不能直接使用都需要手动操作一二，这无形中给开发者带来一点点麻烦，让人心里不爽。 dev_prokit 为开发者提供便捷的颜色获取方法，完美对接各种设计网站。

二、功能介绍和牛刀小试

功能介绍

dev_prokit 为开发者提供了两个方法，如下：
- color
  
  该方法支持 HEX 、HEXA 两种色值直接转化。例如: '#F6F7F8'.color、'#F6F7F8FF'.color。然而该方法还支持 CSS 颜色格式转化，例如: '#f12'.color。
- ahexColor
  
  该方法只支持 AHEX 格式颜色值转化。例如：'#FFF6F7F8'.ahexColor。
看了上面的方法介绍，这就是对十六进制的字符串进行处理转化为颜色的。是的，在开发中 98% 的开发者从设计网站上拷贝的颜色值是不是都是带 #的十六进制字符串？所以，dev_prokit 就支持这种形式。

牛刀小试

我们将以下图所示颜色进行测试，如图:

我们看到该颜色的 HEX 值是 #FF3B30 ; AHEX 值是 #FFFF3B30; HEXA 值是 #ff3b30FF。下面我们将使用 dev_prokit 提供的方法进行测试。

dev_prokit 的引入有两种形式:

执行 flutter pub add dev_prokit 即可。
将 dev_prokit: ^xxx 粘贴到 pubspec.yaml 文件的 dependencies 模块下即可。

测试代码如下：

dart 复制代码

Column(
  children: [
    const Text('HEX: #FF3B30'),
    Container(
      color: '#FF3B30'.color,
      height: 60,
      width: 60,
    )
  ],
),
Column(
  children: [
    const Text('HEXA: #ff3b30FF'),
    Container(
      color: '#ff3b30FF'.color,
      height: 60,
      width: 60,
    )
  ],
),
Column(
  children: [
    const Text('AHEX: #FFFF3B30'),
    Container(
      color: '#FFFF3B30'.ahexColor,
      height: 60,
      width: 60,
    )
  ],
)

测试结果如下：

三、总结与鼓励

这便是 dev_prokit 提供的方法之一。以编写代码较少、功能完善、代码运行强壮、支持面广等形式来开发 dev_prokit 包。如果你有 Idea 或者 Opinion ，那请你点击此处》》Idea & Opinion《《把它留下吧！如果你在使用该功能后感觉还可以，它能够给你的项目开发带来便捷，那请你为之点个⭐️ dev_prokit ⭐️ 吧！分享给更多需要它的开发者。