gradients

Implementations of Flutter's LinearGradient, RadialGradient, and SweepGradient with support for the CMYK, HSI, HSL, HSP, HSB, LAB, Oklab, RGB, and XYZ color spaces.

gradients depends on and exposes the flutter_color_models package.

See: flutter_palette, a package for generating color palettes.

Usage

import 'package:gradients/gradients.dart';

The 3 classes in gradients can be used interchangeably with Flutter's Gradients: LinearGradientPainter, RadialGradientPainter, and SweepGradientPainter.

final colors = <Color>[Colors.lime, Colors.pink, Colors.cyan];
final linearGradient = LinearGradientPainter(colors: colors);
final radialGradient = RadialGradientPainter(colors: colors);
final sweepGradient = SweepGradientPainter(colors: colors);

Like Gradients, GradientPainters can be provided to a BoxDecoration, or the createShader method can be used to paint directly to a Canvas.

final widget = Container(
  decoration: BoxDecoration(
    gradient: LinearGradientPainter(
      colors: <Color>[Colors.lime, Colors.pink, Colors.cyan],
    ),
  ),
);

Color Spaces

By default, Colors are interpolated in the RGB color space; A colorSpace can be provided to set the color space colors will be interpolated in.

final colors = <Color>[Colors.lime, Colors.pink, Colors.cyan];
final oklabGradient = LinearGradientPainter(
  colorSpace: ColorSpace.oklab,
  colors: colors,
);

Oklab Gradient

Color Models

However, if ColorModels are utilized and no colorSpace is provided, the gradient will be interpolated in the color space defined by the starting color within any pair of colors.

final colors = <Color>[
  RgbColor(0, 188, 212),
  HsbColor(35, 100, 100),
  OklabColor(0.9, -0.05, 0.033),
  HspColor(175, 100, 50),
];

// This gradient will be interpolated in the RGB color space,
// then the HSB color space, then the Oklab color space.
final gradient = LinearGradientPainter(colors: colors);

Color Models Example Gradient

If invert is set to true, the gradient will be interpolated in the color space defined by the ending color within any pair of colors.

// This gradient will be interpolated in the HSB color space,
// then the Oklab color space, then the HSP color space.
final gradient = LinearGradientPainter(colors: colors, invert: true);

Color Models Inverted Example Gradient

Output

Below is the same set of colors interpolated in each of the supported color spaces.

final colors = <Color>[Colors.lime, Colors.pink, Colors.cyan];

CMYK

final gradient = LinearGradientPainter(
    colors: colors, colorSpace: ColorSpace.cmyk);

CMYK Gradient

HSB

final gradient = LinearGradientPainter(
    colors: colors, colorSpace: ColorSpace.hsb);

HSB Gradient

HSI

final gradient = LinearGradientPainter(
    colors: colors, colorSpace: ColorSpace.hsi);

HSI Gradient

HSL

final gradient = LinearGradientPainter(
    colors: colors, colorSpace: ColorSpace.hsl);

HSL Gradient

HSP

final gradient = LinearGradientPainter(
    colors: colors, colorSpace: ColorSpace.hsp);

HSP Gradient

LAB

final gradient = LinearGradientPainter(
    colors: colors, colorSpace: ColorSpace.lab);

LAB Gradient

Oklab

final gradient = LinearGradientPainter(
    colors: colors, colorSpace: ColorSpace.oklab);

Oklab Gradient

RGB

final gradient = LinearGradientPainter(
    colors: colors, colorSpace: ColorSpace.rgb);

RGB Gradient

XYZ

final gradient = LinearGradientPainter(
    colors: colors, colorSpace: ColorSpace.xyz);

XYZ Gradient