Flutter颜色转换插件ffr_hex_color的使用

ffr_hex_color

ffr_hex_color 是一个用于将十六进制颜色字符串转换为 Flutter 中可用的颜色数据包。

该源代码 100% 使用 Dart 和 Flutter，所有必要的文件都位于 /lib 文件夹中。

安装

在 pubspec.yaml 的 dependencies: 部分添加以下行：

ffr_hex_color: <latest_version>

然后在项目中导入：

import 'package:ffr_hex_color/ffr_hex_color.dart';

基本用法

以下是一个简单的示例，展示如何使用 ffr_hex_color 将十六进制颜色字符串转换为 Flutter 中的 Color 对象。

示例代码

class HomeScreen extends StatefulWidget {
  [@override](/user/override)
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  // 定义一个十六进制颜色字符串
  String hexColor = '#eb34db';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FFR Hex Color 示例'),
      ),
      body: Center(
        child: Container(
          width: 100,
          height: 100,
          color: FFRHexColor(hexColor), // 使用 FFRHexColor 转换颜色
        ),
      ),
    );
  }
}

在这个示例中，我们定义了一个十六进制颜色字符串 #eb34db，并通过 FFRHexColor 将其转换为 Flutter 的 Color 对象，并应用到一个 Container 的背景色上。

完整示例 Demo

以下是一个完整的示例代码，展示如何在 Flutter 应用程序中使用 ffr_hex_color 插件来显示多个不同颜色的矩形。

示例代码

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FFR Hex Color DEMO',
      home: MyHomePage(title: 'FFR Hex Color DEMO'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          // 第一个矩形
          Center(
            child: Container(
              width: 100,
              height: 100,
              color: FFRHexColor('#eb34db'), // 紫红色
            ),
          ),
          // 第二个矩形
          Center(
            child: Container(
              width: 100,
              height: 100,
              color: FFRHexColor('#4287f5'), // 天蓝色
            ),
          ),
          // 第三个矩形（带错误格式的十六进制颜色）
          Center(
            child: Container(
              width: 100,
              height: 100,
              color: FFRHexColor('48f542#'), // 错误格式
            ),
          ),
          // 第四个矩形
          Center(
            child: Container(
              width: 100,
              height: 100,
              color: FFRHexColor('#f5c242'), // 橙黄色
            ),
          ),
          // 第五个矩形
          Center(
            child: Container(
              width: 100,
              height: 100,
              color: FFRHexColor('#a742f5'), // 浅紫色
            ),
          ),
        ],
      ),
    );
  }
}