Flutter颜色名称转换插件hexcolorname的使用

特性

• 根据颜色代码检索颜色名称。
• 支持多种颜色模式，如互补色、反转色和文本反转色。
• 在iOS、Android、Web、Windows、macOS和Linux上运行。

安装

在你的pubspec.yaml文件中添加hexcolorname作为依赖：

dependencies:
  hexcolorname: ^0.0.8

使用

要使用此包，将其导入到你的Dart代码中：

import 'package:hexcolorname/hexcolorname.dart';

然后，你可以使用HexColorText小部件来显示颜色名称：

const String _color = '#A2B9C2';

void main() => runApp(
      const MaterialApp(
        home: Material(
          child: Center(
              child: HexColorText(
                  mode: ColorMode.complementarycolor, hexColor: _color)),
        ),
      ),
    );

查看示例应用以获取更复杂的使用示例。

文档

有关更详细的文档，请参阅API参考。

许可证

该项目采用MIT许可证 - 详情请参阅LICENSE文件。

示例代码

以下是完整的示例代码，展示了如何使用hexcolorname插件：

import 'package:flutter/material.dart';
import 'package:hexcolorname/hexcolorname.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';

///
/// complementary Mode将返回给定颜色的互补色（例如，#C2ABA2的互补色）
/// inverted Mode将返回给定颜色的反转色（例如，#5D463D）
/// textinverted Mode将返回给定颜色的黑白颜色（例如，对于浅色背景将返回黑色，对于深色背景将返回白色）
///

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ColorModeDemo(),
    );
  }
}

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

class _ColorModeDemoState extends State<ColorModeDemo> {
  final TextEditingController _controller =
      TextEditingController(text: "A2B9C2");

  void _openColorPicker() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Pick a color'),
          content: SingleChildScrollView(
            child: ColorPicker(
              pickerColor: _controller.text.toColor(),
              onColorChanged: (Color color) {
                setState(() {
                  _controller.text = color.hexWithoutPrefix;
                });
              },
              pickerAreaHeightPercent: 0.8,
            ),
          ),
          actions: <Widget>[
            TextButton(
              child: Text('OK'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Color Mode Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            TextFormField(
              controller: _controller,
              onChanged: (_) {
                if (_.length == 6 || _.length == 3) {
                  setState(() {});
                }
              },
              decoration: InputDecoration(
                  labelText: 'Enter color',
                  suffixIcon: IconButton(
                    onPressed: _openColorPicker,
                    icon: Icon(Icons.pending),
                  )),
            ),
            SizedBox(height: 20),
            ListTile(
              title: Text(
                "Style Mode of HexColorText: \n${(_controller.text.hexWithoutPrefix)}",
                textAlign: TextAlign.center,
              ),
              subtitle: HexColorText(
                  key: UniqueKey(),
                  hexColor: _controller.text.removeHexPrefix()),
            ),
            SizedBox(height: 20),
            ListTile(
              title: Text(
                "Complementary color Mode of HexColorText ",
                textAlign: TextAlign.center,
              ),
              subtitle: HexColorText(
                  key: UniqueKey(),
                  mode: ColorMode.complementarycolor,
                  hexColor: _controller.text),
            ),
            SizedBox(height: 20),
            ListTile(
              title: Text(
                "Invertedcolor color Mode of HexColorText ",
                textAlign: TextAlign.center,
              ),
              subtitle: HexColorText(
                  key: UniqueKey(),
                  mode: ColorMode.invertedcolor,
                  hexColor: _controller.text),
            ),
            SizedBox(height: 20),
            ListTile(
              title: Text(
                "Textcolor color Mode of HexColorText ",
                textAlign: TextAlign.center,
              ),
              subtitle: HexColorText(
                  key: UniqueKey(),
                  mode: ColorMode.textinvert,
                  hexColor: _controller.text),
            ),
            SizedBox(height: 20),
          ],
        ),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}