Flutter颜色名称获取插件uni_color

Flutter颜色名称获取插件uni_color_name的使用

插件简介

uni_color_name 是一个用于在Flutter项目中通过颜色名称获取颜色值，或者通过颜色值获取颜色名称的插件。它支持超过1000种颜色名称，并且使用多种方法来计算模糊搜索的距离。该插件易于使用并且经过了充分测试，适用于各种平台（Android、iOS、Linux、MacOS、Windows）和SDK（Dart、Flutter）。

插件特性

支持超过1000种颜色名称
通过颜色名称获取颜色值
通过颜色值获取颜色名称
支持模糊搜索
跨平台支持

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  uni_color_name: ^latest_version

然后运行 flutter pub get 来安装插件。

使用示例

以下是一个完整的示例代码，展示了如何使用 uni_color_name 插件来获取颜色值和颜色名称。

示例代码

// ignore_for_file: avoid_print

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('uni_color_name 示例'),
        ),
        body: Center(
          child: ColorNameExample(),
        ),
      ),
    );
  }
}

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

class _ColorNameExampleState extends State<ColorNameExample> {
  final UniColorName u = UniColorName(zeplinPalette);
  String colorValue = '';
  String colorName = '';

  void getColorValue() {
    setState(() {
      colorValue = u.value('forrest green').toString();
    });
  }

  void getColorName() {
    setState(() {
      colorName = u.name(RgbInt8Color.rgb(0x15, 0x44, 0x06));
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: getColorValue,
          child: Text('获取 "forrest green" 的颜色值'),
        ),
        SizedBox(height: 20),
        Text('颜色值: $colorValue'),
        SizedBox(height: 40),
        ElevatedButton(
          onPressed: getColorName,
          child: Text('获取 RGB(21, 68, 6) 的颜色名称'),
        ),
        SizedBox(height: 20),
        Text('颜色名称: $colorName'),
      ],
    );
  }
}

更多关于Flutter颜色名称获取插件uni_color_name的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

ionicwang 1楼•8 天前

更多关于Flutter颜色名称获取插件uni_color_name的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何使用 uni_color_name 插件来获取 Flutter 中颜色名称的代码示例。这个插件可以帮助你将 RGB 或 HEX 颜色值转换为最接近的颜色名称。

首先，你需要在你的 pubspec.yaml 文件中添加这个插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  uni_color_name: ^latest_version  # 请替换为实际的最新版本号

然后运行 flutter pub get 来获取依赖。

接下来是一个简单的 Flutter 应用示例，展示如何使用 uni_color_name 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Color Name Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? colorName;
  Color selectedColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Color Name Getter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 100,
              height: 100,
              color: selectedColor,
            ),
            SizedBox(height: 20),
            Text(
              'Color Name: ${colorName ?? "Unknown"}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                String? name = await getColorName(selectedColor);
                setState(() {
                  colorName = name;
                });
              },
              child: Text('Get Color Name'),
            ),
          ],
        ),
      ),
    );
  }

  Future<String?> getColorName(Color color) async {
    // Convert Color to RGB
    int red = color.red;
    int green = color.green;
    int blue = color.blue;

    // Create a Map with RGB values
    Map<String, int> rgb = {
      'r': red,
      'g': green,
      'b': blue,
    };

    // Initialize UniColorName
    UniColorName colorNameFinder = UniColorName();

    // Get the closest color name
    return await colorNameFinder.getNearestColorName(rgb);
  }
}

在这个示例中：

我们创建了一个简单的 Flutter 应用，包含一个显示颜色的容器和一个显示颜色名称的文本。
getColorName 方法将 Color 对象转换为 RGB 值，并使用 UniColorName 插件来获取最接近的颜色名称。
当用户点击按钮时，应用会调用 getColorName 方法并更新界面上显示的颜色名称。

请确保你已经在你的 Flutter 环境中正确安装了 uni_color_name 插件，并根据需要调整代码中的细节。