ImageFiltered in Flutter

a widget that applies ImageFilter to its children

In this article, we will discuss the ImageFiltered class that uses as an image blur, Transform any pixels, or in other words we called as matrix transformation.

ImageFiltered is a low-level class that takes pixels and registers them, it is a small but powerful widget that lets you blur or pixel Transformation anything in your app. it’s often a better alternative to BackdropFilter.

Now let’s discuss using this.
The first step is, we import this like way

Import ‘dart:ui’;

After import, we have many options available for widget customization,

So let’s discuss some of these.

First is we can blur anything like this,

ImageFilter.blur()

Example :-

import 'package:flutter/material.dart';
import 'dart:ui';


void main() async {
  runApp(
    MyApp(),
  );
}
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ImageFiltered(
          imageFilter: ImageFilter.blur(sigmaX: 5),
          child: Center(
            child: FlutterLogo(
              size: 220,
            ),
          ),
        ),
      ),
    );
  }
}

Second is any matrix transformation(scaling,translating,rotating,squing) like this,

ImageFilter.matrix()

Example :-

import 'package:flutter/material.dart';
import 'dart:ui';


void main() async {
  runApp(
    MyApp(),
  );
}
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ImageFiltered(
          imageFilter: ImageFilter.matrix(Matrix4.rotationZ(0.2).storage),
          child: Center(
            child: FlutterLogo(
              size: 220,
            ),
          ),
        ),
      ),
    );
  }
}

ImageFiltered is not just only for images, but as well as we can apply this for any widget.it is s similar to BackdropFliter. But it is a less performer

So ImageFiltered is an easy way to blur or Transform pixel a widget in our app.

So Next time you can try this widget in your App, it’s awesome and works a charm.

if you got something wrong? Mention it in the comments. I would love to improve.
I am Shirsh Shukla. A creative developer and a Technology lover. You can find me on Linkedin or maybe follow me on Twitter.
Have a nice day!🙂