Flutter随机颜色生成插件random_color的使用

Flutter随机颜色生成插件random_color的使用

随机颜色生成器

该库将生成视觉上令人愉悦的随机颜色，并且可以通过传递自定义色相、饱和度和亮度范围来自定义。这允许它生成特定颜色的轻微差异。

蓝色颜色：

蓝颜色

红色颜色：

红颜色

绿色颜色：

绿颜色

低饱和度颜色：

低饱和度颜色

高饱和度颜色：

高饱和度颜色

浅色颜色：

浅色颜色

深色颜色：

深色颜色

使用方法

获取随机颜色

randomColor 函数可以带有 colorHue, colorSaturation 和 colorBrightness 参数，允许自定义生成的颜色。

import 'package:random_color/random_color.dart';

RandomColor _randomColor = RandomColor();

Color _color = _randomColor.randomColor();

获取颜色名称

可以从十六进制字符串（不带 # 和透明度值）或从 Color 对象获取颜色名称。

Color _color = Color('FF0000'.toRadixString(16));
MyColor _myColor = getColorNameFromColor(_color);

// 输出: 'Red'
print(_myColor.getName);

获取仅红色的颜色

RandomColor 可以生成特定颜色类型，只要色相、饱和度和亮度不太受限，这仍然会给出丰富的结果。

import 'package:random_color/random_color.dart';

RandomColor _randomColor = RandomColor();

Color _color = _randomColor.randomColor(colorHue: ColorHue.red);

获取仅红色和蓝色的颜色

您可以组合多个色相范围来选择颜色。

import 'package:random_color/random_color.dart';

RandomColor _randomColor = RandomColor();

Color _color = _randomColor.randomColor(
  colorHue: ColorHue.multiple([ColorHue.red, ColorHue.blue])
);

获取高饱和度颜色

import 'package:random_color/random_color.dart';

RandomColor _randomColor = RandomColor();

Color _color = _randomColor.randomColor(
  colorSaturation: ColorSaturation.highSaturation
);

获取浅色颜色

import 'package:random_color/random_color.dart';

RandomColor _randomColor = RandomColor();

Color _color = _randomColor.randomColor(
  colorBrightness: ColorBrightness.light
);

测试

如果您想在 Flutter Dart 下运行此项目的测试，请执行以下命令：

flutter pub pub run test

完整示例代码

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

void main() => runApp(MaterialApp(home: new MyApp()));

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Color> generatedColors = [];
  final List<ColorHue> _hueType = [
    ColorHue.green,
    ColorHue.red,
    ColorHue.pink,
    ColorHue.purple,
    ColorHue.blue,
    ColorHue.yellow,
    ColorHue.orange
  ];
  ColorBrightness _colorLuminosity = ColorBrightness.random;
  ColorSaturation _colorSaturation = ColorSaturation.random;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: const Text('Example of Random colors library'),
      ),
      body: Container(child: _showColors()),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: new FloatingActionButton(
              tooltip: 'RefreshColors',
              child: const Icon(Icons.refresh),
              onPressed: _updateColor,
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: new FloatingActionButton(
              tooltip: 'Filter',
              child: const Icon(Icons.filter_list),
              onPressed: _showFilterDialog,
            ),
          ),
        ],
      ),
    );
  }

  Widget _showColors() {
    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
      shrinkWrap: true,
      itemBuilder: (BuildContext context, int index) {
        Color _color;

        if (generatedColors.length > index) {
          _color = generatedColors[index];
        } else {
          _color = RandomColor().randomColor(
              colorHue: ColorHue.multiple(colorHues: _hueType),
              colorSaturation: _colorSaturation,
              colorBrightness: _colorLuminosity);

          generatedColors.add(_color);
        }

        Color getTextColor() {
          if (_color == null) {
            return Colors.black;
          }

          if (_color.computeLuminance() > 0.3) {
            return Colors.black;
          } else {
            return Colors.white;
          }
        }

        return InkWell(
          onTap: () {
            showDialog<void>(
                context: context,
                builder: (BuildContext context) {
                  MaterialColor _mc = RandomColor().randomMaterialColor(
                      colorHue: ColorHue.custom(Range.staticValue(HSLColor.fromColor(_color).hue.toInt())),
                      colorSaturation: _colorSaturation);

                  return Dialog(
                    child: Column(
                      children: <Widget>[
                        Text('Material color'),
                        Column(
                          children: <Widget>[
                            Container(
                              height: 50.0,
                              color: _mc.shade50,
                              child: Center(
                                child: Text('50'),
                              ),
                            ),
                            Container(
                              height: 50.0,
                              color: _mc.shade100,
                              child: Center(
                                child: Text('100'),
                              ),
                            ),
                            Container(
                              height: 50.0,
                              color: _mc.shade200,
                              child: Center(
                                child: Text('200'),
                              ),
                            ),
                            Container(
                              height: 50.0,
                              color: _mc.shade300,
                              child: Center(
                                child: Text('300'),
                              ),
                            ),
                            Container(
                              height: 50.0,
                              color: _mc.shade400,
                              child: Center(
                                child: Text('400'),
                              ),
                            ),
                            Container(
                              height: 80.0,
                              color: _mc.shade500,
                              child: Center(
                                child: Text('500 - Base'),
                              ),
                            ),
                            Container(
                              height: 50.0,
                              color: _mc.shade600,
                              child: Center(
                                child: Text('600'),
                              ),
                            ),
                            Container(
                              height: 50.0,
                              color: _mc.shade700,
                              child: Center(
                                child: Text('700'),
                              ),
                            ),
                            Container(
                              height: 50.0,
                              color: _mc.shade800,
                              child: Center(
                                child: Text('800'),
                              ),
                            ),
                            Container(
                              height: 50.0,
                              color: _mc.shade900,
                              child: Center(
                                child: Text('900'),
                              ),
                            )
                          ],
                        )
                      ],
                    ),
                  );
                });
          },
          child: Card(
            color: _color,
            child: Container(
              margin: const EdgeInsets.all(12.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      getColorNameFromColor(_color).getName,
                      style: Theme.of(context).textTheme.title.copyWith(fontSize: 13.0, color: getTextColor()),
                    ),
                  ),
                  Container(
                    alignment: Alignment.centerRight,
                    child: Text(
                      '#${_color.value.toRadixString(16).toUpperCase()}',
                      style: Theme.of(context)
                          .textTheme
                          .caption
                          .copyWith(color: getTextColor(), fontSize: 16.0, fontWeight: FontWeight.w300),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }

  void _showFilterDialog() async {
    await showDialog<Null>(
        context: context,
        builder: (BuildContext context) {
          return FilterDialog(
            hueType: _hueType,
            colorLuminosity: _colorLuminosity,
            colorSaturation: _colorSaturation,
            hueTypeChange: (List<ColorHue> hues) {
              _hueType.clear();
              _hueType.addAll(hues);
            },
            luminosityTypeChange: (ColorBrightness cb) => _colorLuminosity = cb,
            saturationTypeChange: (ColorSaturation cs) => _colorSaturation = cs,
          );
        }).catchError(print);

    _updateColor();
  }

  void _updateColor() {
    setState(() {
      generatedColors.clear();
    });
  }
}

typedef void HueTypeChange(List<ColorHue> colorHues);
typedef void SaturationTypeChange(ColorSaturation colorSaturation);
typedef void LuminosityTypeChange(ColorBrightness colorBrightness);

class FilterDialog extends StatefulWidget {
  FilterDialog({
    Key key,
    this.hueType,
    this.colorSaturation,
    this.colorLuminosity,
    this.hueTypeChange,
    this.saturationTypeChange,
    this.luminosityTypeChange,
  }) : super(key: key);

  final List<ColorHue> hueType;
  final ColorBrightness colorLuminosity;
  final ColorSaturation colorSaturation;

  final HueTypeChange hueTypeChange;
  final SaturationTypeChange saturationTypeChange;
  final LuminosityTypeChange luminosityTypeChange;

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

class _FilterDialogState extends State<FilterDialog> {
  final List<ColorHue> _hueType = [];
  ColorBrightness _colorLuminosity;
  ColorSaturation _colorSaturation;

  [@override](/user/override)
  void initState() {
    super.initState();

    _hueType.addAll(widget.hueType);
    _colorLuminosity = widget.colorLuminosity;
    _colorSaturation = widget.colorSaturation;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SimpleDialog(children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              color: Colors.white,
              child: Text('Color hue: '),
            ),
            Container(
              height: 175.0,
              width: MediaQuery.of(context).size.width * 0.5,
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: ColorHue.values.length,
                itemBuilder: (BuildContext context, int index) {
                  final ColorHue _hue = _hueType.firstWhere((ColorHue hue) => hue.type == ColorHue.values[index].type,
                      orElse: () => null);
                  final Color _color = RandomColor(8).randomColor(
                      colorHue: ColorHue.values[index],
                      colorSaturation: _colorSaturation,
                      colorBrightness: _colorLuminosity);

                  return Container(
                    height: 50.0,
                    child: Flex(
                      direction: Axis.horizontal,
                      children: <Widget>[
                        Container(
                          height: 50.0,
                          width: 12.0,
                          color: _color,
                        ),
                        Expanded(
                          child: Container(
                            color: _color.withOpacity(0.1),
                            padding: const EdgeInsets.all(8.0),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                Text(ColorHue.values[index].toString()),
                                Checkbox(
                                  value: _hue != null,
                                  onChanged: (bool value) {
                                    if (_hue != null) {
                                      _removeColorHue(_hue);
                                    } else {
                                      _addColorHue(ColorHue.values[index]);
                                    }

                                    _hueType.removeWhere((ColorHue hue) => hue == null);
                                    widget.hueTypeChange(_hueType);
                                  },
                                )
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              color: Colors.white,
              child: Text('Color brightness: '),
            ),
            DropdownButton<int>(
              value: _colorLuminosity.type,
              onChanged: (int luminosity) {
                setState(() => _colorLuminosity = ColorBrightness.values[luminosity]);

                widget.luminosityTypeChange(_colorLuminosity);
              },
              items: ColorBrightness.values
                  .map((ColorBrightness l) =>
                      DropdownMenuItem<int>(child: Container(child: Text(l.toString())), value: l.type))
                  .toList(),
            )
          ],
        ),
      ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              color: Colors.white,
              child: Text('Color saturation: '),
            ),
            DropdownButton<int>(
              value: _colorSaturation.type,
              onChanged: (int saturation) {
                setState(() => _colorSaturation = ColorSaturation.values[saturation]);

                widget.saturationTypeChange(_colorSaturation);
              },
              items: ColorSaturation.values
                  .map((ColorSaturation cf) =>
                      DropdownMenuItem<int>(child: Container(child: Text(cf.toString())), value: cf.type))
                  .toList(),
            )
          ],
        ),
      ),
    ]);
  }

  void _addColorHue(ColorHue c) {
    setState(() {
      _hueType.add(c);
    });
  }

  void _removeColorHue(ColorHue c) {
    setState(() {
      _hueType.remove(c);

      if (_hueType.isEmpty) {
        _hueType.add(ColorHue.random);
      }
    });
  }
}

更多关于Flutter随机颜色生成插件random_color的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter随机颜色生成插件random_color的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，random_color 是一个用于生成随机颜色的插件。它可以帮助你轻松地生成随机的颜色，并且可以根据需要调整颜色的亮度、饱和度和色调等属性。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  random_color: ^1.0.6  # 请检查最新版本

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

2. 使用 random_color 插件

在你的 Dart 文件中导入 random_color 插件：

import 'package:random_color/random_color.dart';

3. 生成随机颜色

你可以使用 RandomColor 类来生成随机颜色。以下是一些常见的用法：

3.1 生成一个完全随机的颜色

RandomColor _randomColor = RandomColor();
Color color = _randomColor.randomColor();

print(color); // 输出类似 Color(0xff4caf50)

3.2 生成特定色调的随机颜色

你可以指定颜色的色调范围，例如只生成蓝色调的颜色：

Color color = _randomColor.randomColor(
  colorHue: ColorHue.blue,
);

print(color); // 输出蓝色调的颜色

ColorHue 枚举提供了多种色调选项，如 red, orange, yellow, green, blue, purple, pink, monochrome 等。

3.3 生成特定亮度和饱和度的随机颜色

你可以通过 colorBrightness 和 colorSaturation 参数来控制颜色的亮度和饱和度：

Color color = _randomColor.randomColor(
  colorBrightness: ColorBrightness.light,
  colorSaturation: ColorSaturation.highSaturation,
);

print(color); // 输出高饱和度且明亮的颜色

ColorBrightness 枚举提供了 dark, light, random 等选项。ColorSaturation 枚举提供了 highSaturation, lowSaturation, random 等选项。

4. 示例代码

以下是一个完整的示例，展示如何在 Flutter 应用中使用 random_color 插件生成随机颜色：

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

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

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

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

class _RandomColorScreenState extends State<RandomColorScreen> {
  Color _backgroundColor = Colors.white;

  void _changeBackgroundColor() {
    RandomColor _randomColor = RandomColor();
    setState(() {
      _backgroundColor = _randomColor.randomColor(
        colorHue: ColorHue.blue,
        colorBrightness: ColorBrightness.light,
        colorSaturation: ColorSaturation.highSaturation,
      );
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: _backgroundColor,
      appBar: AppBar(
        title: Text('Random Color Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _changeBackgroundColor,
          child: Text('Change Background Color'),
        ),
      ),
    );
  }
}
回到顶部