random_color 1.0.6-nullsafety

Generate random colors from hue, saturation and brightness that are visualy appearing. You can chose exact color specifications.

example/lib/main.dart

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: 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: FloatingActionButton(
              tooltip: 'RefreshColors',
              child: const Icon(Icons.refresh),
              onPressed: _updateColor,
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: 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.computeLuminance() > 0.3) {
            return Colors.black;
          } else {
            return Colors.white;
          }
        }

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

                  return Dialog(
                    child: Column(
                      children: <Widget>[
                        const Text('Material color'),
                        Column(
                          children: <Widget>[
                            Container(
                              height: 50.0,
                              color: _mc.shade50,
                              child: const Center(
                                child: Text('50'),
                              ),
                            ),
                            Container(
                              height: 50.0,
                              color: _mc.shade100,
                              child: const Center(
                                child: Text('100'),
                              ),
                            ),
                            Container(
                              height: 50.0,
                              color: _mc.shade200,
                              child: const Center(
                                child: Text('200'),
                              ),
                            ),
                            Container(
                              height: 50.0,
                              color: _mc.shade300,
                              child: const Center(
                                child: Text('300'),
                              ),
                            ),
                            Container(
                              height: 50.0,
                              color: _mc.shade400,
                              child: const Center(
                                child: Text('400'),
                              ),
                            ),
                            Container(
                              height: 80.0,
                              color: _mc.shade500,
                              child: const Center(
                                child: Text('500 - Base'),
                              ),
                            ),
                            Container(
                              height: 50.0,
                              color: _mc.shade600,
                              child: const Center(
                                child: Text('600'),
                              ),
                            ),
                            Container(
                              height: 50.0,
                              color: _mc.shade700,
                              child: const Center(
                                child: Text('700'),
                              ),
                            ),
                            Container(
                              height: 50.0,
                              color: _mc.shade800,
                              child: const Center(
                                child: Text('800'),
                              ),
                            ),
                            Container(
                              height: 50.0,
                              color: _mc.shade900,
                              child: const 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
                          .headline6
                          ?.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 HueTypeChange = void Function(List<ColorHue> colorHues);
typedef SaturationTypeChange = void Function(ColorSaturation colorSaturation);
typedef LuminosityTypeChange = void Function(ColorBrightness colorBrightness);

class FilterDialog extends StatefulWidget {
  const FilterDialog({
    Key? key,
    required this.hueType,
    required this.colorSaturation,
    required this.colorLuminosity,
    required this.hueTypeChange,
    required this.saturationTypeChange,
    required 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
  _FilterDialogState createState() => _FilterDialogState();
}

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

  @override
  void initState() {
    super.initState();

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

  @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: const 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);
                  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: const Text('Color brightness: '),
            ),
            DropdownButton<int>(
              value: _colorLuminosity.type,
              onChanged: (int? luminosity) {
                setState(() =>
                    _colorLuminosity = ColorBrightness.values[luminosity ?? 0]);

                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: const Text('Color saturation: '),
            ),
            DropdownButton<int>(
              value: _colorSaturation.type,
              onChanged: (int? saturation) {
                setState(() =>
                    _colorSaturation = ColorSaturation.values[saturation ?? 0]);

                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);
      }
    });
  }
}