james-alex/gradients

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 [Gradient]s: [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 [Gradient]s, [GradientPainter]s 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, [Color]s 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 [ColorModel]s 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