Flutter颜色转换插件color_hex的使用

Flutter颜色转换插件color_hex的使用

插件介绍

color_hex 是一个帮助你将十六进制颜色转换为 Color() 对象，以及将 Color() 对象转换为十六进制颜色的插件。该插件由 Nasr Al-Rahbi 开发。

安装插件

首先，你需要在你的 pubspec.yaml 文件中添加 color_hex 插件，并指定版本号（例如：color_hex: ^1.0.0）。

dependencies:
  color_hex: ^1.0.0

使用示例

方法一：通过扩展名使用

你可以直接在文本或颜色上使用扩展名来实现颜色和十六进制颜色之间的转换：

Color color = Colors.deepPurple;
String hex = "#000000";
/// 这里我们将十六进制颜色转换为 `Color()` 对象
Text(color.convertToHex.hex, style: TextStyle(color: hex.convertToColor)),

方法二：使用函数进行转换

你也可以通过调用特定的函数来进行颜色和十六进制颜色之间的转换：

Color color = Colors.deepPurple;
String hex = "#000000";

InkWell(
  onTap: () {
    /// 将十六进制颜色转换为 `Color()`
    print(hexTo Color(hex).toString());

    /// 将 `Color()` 转换为十六进制颜色
    print(color to Hex(color).hex);
    print(color to Hex(color).color);

  },
  child: Text(
    "点击转换",
    style: TextStyle(
      /// 颜色转换后再次转换回十六进制颜色
      color: color convert To Hex(hex)!.convert To Color,
    ),
  )
)

示例代码

下面是一个完整的示例代码，展示了如何使用 color_hex 插件进行颜色和十六进制颜色之间的转换。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  Color color = Colors.deepPurple;
  String hex = "#000000";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it in the middle of the parent.
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            /// Convert Using Extension
            Text(
              color.convertTo Hex.hex!,
              style: TextStyle(color: hex.convert To Color),
            ),
            InkWell(
                onTap: () {
                  /// Convert HexColor to Color()
                  print(hex to Color(hex).toString());

                  /// Convert Color() to HexColor
                  print(color to Hex(color).hex);
                  print(color to Hex(color).color);

                },
                child: Text(
                  "点击转换",
                  style: TextStyle(
                    /// 颜色转换后再次转换回十六进制颜色
                    color: color convert To Hex(hex)!.convert To Color,
                  ),
                ))
          ],
        ),
      ),
    );
  }
}