Provides a mesh gradient that works similarly to LinearGradient and RadialGradient. You can use MeshGradient in decorations and animations.

You can check a live preview in this blog post!

Features

• MeshGradient - a class that extends Gradient and aims to be used similarly to RadialGradient and LinearGradient.
  • You can choose up to 8 colors.
  • You can choose the offsets - where the colors are positioned.
  • You can chhose the strengths - how dominant each color is.
  • You can choose the sigmas - the spread range of each color.
  • It supports lerping, so you can animate it with BoxDecoration + AnimatedContainer for example.
• MeshGradientContainer - a simple Container with a MeshGradient decoration.
• AnimatedMeshGradientContainer - an animated container that shuffles the gradient colors periodically.

Getting started

To use MeshGradient, you have to initialize the shader that powers it. Simply await for MeshGradient.precacheShader() in your app startup, or through a FutureBuilder for example.

Future<void> main() async {
  await MeshGradient.precacheShader();
  runApp(const MyApp());
}

Note: MeshGradientContainer will load the shader on your behalf, if it wasn't done previously.

Usage

The 'Example' tab shows how to implement an animated mesh gradient.

An example using MeshGradient as part of the decoration for a Container.

Future<void> main() async {
  await MeshGradient.precacheShader();
  runApp(const MyApp());
}

// ... MyApp() ...

class MyMeshContainer extends StatelessWidget {
  const MyMeshContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: MeshGradient(
          colors: const [
            Colors.red,
            Colors.green,
            Colors.yellow,
            Colors.blue,
          ],
          offsets: const [
            Offset(0, 0), // topLeft
            Offset(0, 1), // topRight
            Offset(1, 0), // bottomLeft
            Offset(1, 1), // bottomRight
          ],
          strengths: const [1, 1, 1, 1],
          sigmas: const [0.3, 0,2, 0.3, 0.25],
        ),
      ),
    );
  }
}

Additional information

Any contribution is welcome!

You can use the Github repository to report bugs by opening issues, or help implement new features by opening new pull requests.

Thank you!