Add Grayed Out Effect to an Image in Flutter

Adding a grayed-out effect to an image is a common editing technique that can be used to create a variety of different effects. In general, when adding a grayed-out effect to an image, you will want to use a lower opacity for the grayscale layer so that some of the original colors of the image still shine through.

This effect is often used to create a disabled state of a widget.

ColorFiltered(
	colorFilter: const ColorFilter.mode(
	  Colors.grey,
	  BlendMode.saturation,
	),
	child: FadeInImage.assetNetwork(
	  image: "https://cdn.pixabay.com/photo/2022/04/06/20/29/airplane-7116299_960_720.jpg",
	  placeholder: "https://cdn.pixabay.com/photo/2022/04/06/20/29/airplane-7116299_960_720.jpg",
	),
)

Container(
  width: 300,
  foregroundDecoration: const BoxDecoration(
    color: Colors.grey,
    backgroundBlendMode: BlendMode.saturation,
  ),
  child: FadeInImage.assetNetwork(
    image: "https://cdn.pixabay.com/photo/2022/04/06/20/29/airplane-7116299_960_720.jpg",
    placeholder: "https://cdn.pixabay.com/photo/2022/04/06/20/29/airplane-7116299_960_720.jpg",
  ),
)

The following snippet works for transparent image. It was introduced by dnfield.

class GrayOut extends StatelessWidget {
  final Widget? child;

  const GrayOut({Key? key, required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ColorFiltered(
      colorFilter: const ColorFilter.matrix(<double>[
        0.2126, 0.7152, 0.0722, 0, 0,
        0.2126, 0.7152, 0.0722, 0, 0,
        0.2126, 0.7152, 0.0722, 0, 0,
        0, 0, 0, 1, 0,
      ]),
      child: child!,
    );
  }
}