color_mesh 0.0.7 copy "color_mesh: ^0.0.7" to clipboard
color_mesh: ^0.0.7 copied to clipboard

A mesh (multi-point) gradient that can be used like RadialGradient and LinearGradient.

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
MeshGradientContainer
AnimatedMeshGradientContainer
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());
}

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
          ],
        ),
      ),
    );
  }
}

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!

14
likes
80
points
497
downloads
screenshot

Publisher

verified publisherhamzahayak.dev

Weekly Downloads

A mesh (multi-point) gradient that can be used like RadialGradient and LinearGradient.

Repository (GitHub)
View/report issues

Topics

#mesh #gradient #color #ui #animation

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on color_mesh