dev_prokit 之字符串快速转颜色

往期优选推荐

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

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

》fam 和 flutter_gen 相比优点《

  1. fam 不需要在项目的 pubspec.yaml 文件的 dev_dependencies 引入任何东西;而 flutter_gen 需要引入 flutter_gen_runner

  2. fam 在导入资源后只需要执行 fam run 即可;而 flutter_gen 需要执行 dart run build_runner build 。需要注意的是 dart run build_runner build 是很多代码自动生成的运行指令(多语言、json解析、rividerpod...等)。所以一旦执行就需要很长时间才能完成,而 fam 拥有独立的体系,便捷快速!

  3. fam 的资源管理类在项目中使用简短;而 flutter_gen 需要使用.语法一直到资源文件,然后再通过 .path 获取资源路径,这很麻烦!

  4. 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

      该方法支持 HEXHEXA 两种色值直接转化。例如: '#F6F7F8'.color'#F6F7F8FF'.color。然而该方法还支持 CSS 颜色格式转化,例如: '#f12'.color

    • ahexColor

      该方法只支持 AHEX 格式颜色值转化。例如:'#FFF6F7F8'.ahexColor

    看了上面的方法介绍,这就是对十六进制的字符串进行处理转化为颜色的。是的,在开发中 98% 的开发者从设计网站上拷贝的颜色值是不是都是带 #的十六进制字符串?所以,dev_prokit 就支持这种形式。

  • 牛刀小试

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

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

    dev_prokit 的引入有两种形式:

    1. 执行 flutter pub add dev_prokit 即可。
    2. 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 ⭐️ 吧!分享给更多需要它的开发者。

相关推荐
孤鸿玉8 小时前
Fluter InteractiveViewer 与ScrollView滑动冲突问题解决
flutter
叽哥14 小时前
Flutter Riverpod上手指南
android·flutter·ios
BG1 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng1 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭1 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯1 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan2 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓2 天前
Flutter Getx 的页面传参
flutter
火柴就是我3 天前
flutter 之真手势冲突处理
android·flutter
Speed1233 天前
`mockito` 的核心“打桩”规则
flutter·dart