Flutter

How to build stunning UI/UX with ColorFiltered widget

Sometimes its not easy to modify the color of the widget easily but using the ColorFiltered widget it helps to build out the better user experience

Vasanth Jagadeesan

Vasanth Jagadeesan

— 1 min read
How to build stunning UI/UX with ColorFiltered widget

Its very easier to change the color in the flutter but sometimes it's isn't easier to change the parameters. If we want to change the color of the image the end result will not be what we expected using the below code.

Image.asset(
   `assets/bird.png`,
   color: Colors.blue
)

ColorFilter Widget was introduced in 1.9 version. This gives more flexibility for customising the widget color like vibrant and dynamic shades.

If we want to reduce the focus the widget to the users, we can use the saturation blend mode with the ColorFilter mode to achieve this.

ColorFiltered(
  colorFilter: ColorFilter.mode(
   Colors.grey,
   BlendMode.saturation,
  ),
  child: YourWidget(),
)

Summary

We have seen how to use ColorFiltered widget to change the color of the widgets, for more information about the ColorFiltered checkout the https://api.flutter.dev/flutter/dart-ui/ColorFilter-class.html.

Read more