Fade Widgets in Flutter

Give your widgets a Faded Effect.

Let’s say we want to fade a widget called WidgetToBeFaded().

We need to wrap it inside ShaderMask() widget. Return LinearGradient().createShader(bounds) inside shaderCallback function;

In Linear Gradient use Black and a Transparent color. Set the blend mode of shader mask to BlendMode.dstIn.

ShaderMask(
  shaderCallback: (bounds) {
    return const LinearGradient(
                   colors: [
                     Colors.black,
                     Colors.transparent,
                   ],
                 ).createShader(bounds);
   },
  blendMode: BlendMode.dstIn,
  child: WidgetToBeFaded(), // Our Widget
)

We’re done!! Now the transparency of widget is determined by the Linear Gradient’s transparent color.

I hope this helps. Thanks for reading.

This article is also available on my Medium