color_mesh

Description:

color mesh

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!


The color mesh is defined with 4 colors and 4 offsets.
Web is supported in Flutter versions < 3.19 - watching how this issue develops

Features #

MeshGradient - a class that extends Gradient and aims to be used similarly to RadialGradient and LinearGradient.

You can choose 4 colors.
You can choose 4 offsets - where the colors are positioned.
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.



MeshGradientContainer



AnimatedMeshGradientContainer

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());
}
copied to clipboard
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
],
),
),
);
}
}
copied to clipboard
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!