enhanced_gradients

enhanced_gradients pub-web.flutter-io.cn badge

This package adds an easy way to enhance your Flutter gradients and color transitions by interpolating colors in the HCT color system provided by the material_color_utilities package.

Usage

The package exposes two ways to modify the built-in LinearGradient, RadialGradient and SweepGradient gradients:

// 1st way: extension method

LinearGradient(
  colors: const [Color(0xFF000000), Color(0xFFFFFFFF)],
  // ...
).enhanced()

RadialGradient(
  colors: const [Color(0xFF000000), Color(0xFFFFFFFF)],
  // ...
).enhanced()

SweepGradient(
  colors: const [Color(0xFF000000), Color(0xFFFFFFFF)],
  // ...
).enhanced()
// 2nd way: `Enhanced*Gradient` class

EnhancedLinearGradient(
  colors: const [Color(0xFF000000), Color(0xFFFFFFFF)],
  // ...
)

EnhancedRadialGradient(
  colors: const [Color(0xFF000000), Color(0xFFFFFFFF)],
  // ...
)

EnhancedSweepGradient(
  colors: const [Color(0xFF000000), Color(0xFFFFFFFF)],
  // ...
)

There is also a HctColorTween that can be used instead of the regular ColorTween to interpolate colors in the HCT color system in Flutter animations.

Examples

The following examples are screenshots taken in the example app of randomly generated gradients. Note that the HCT gradients might not always look better than the regular ones, as it is all subjective and depends on the desired effect.

First screenshot with gradient comparison

Second screenshot with gradient comparison

Third screenshot with gradient comparison

Libraries

enhanced_gradients