This is the 28th day of my participation in Gwen Challenge

preface

Before we talked about Image, setting colors for images, and the use of various blending algorithms. Today we will discuss the use of various filters in Flutter.

ColorFiltered (color filter)

From the name, we can see that it is used to increase the color filter effect. Let’s recall our previous discussion about setting the color in Image.

  • A normal picture
Image.asset(
  'assets/images/img_03.jpeg',
  width: 375,
  height: 240,
  fit: BoxFit.cover,
)
Copy the code

  • Set a color
Image.asset(
  'assets/images/img_03.jpeg',
  width: 375,
  height: 240,
  fit: BoxFit.cover,
  color: Colors.pink,
)
Copy the code

  • Set blend Mode
Image.asset(
  'assets/images/img_03.jpeg',
  width: 375,
  height: 240,
  fit: BoxFit.cover,
  color: Colors.pink,
  colorBlendMode: BlendMode.color,
)
Copy the code



And we end up with a composite that looks like this with a filter

Tracing the source code



I keep tracking the source code toRenderImageClass, you can see that one was eventually created as wellColorFilter 。

Simple to use

The above is just for Image, what if we want to filter the Widget? Now we need to use ColorFiltered. Let’s see how we can use it

ColorFiltered(
  // Add a color filter
  colorFilter: ColorFilter.mode(
    // Set the color
    Colors.grey,
    // Set the blending mode
    BlendMode.saturation,
  ),
  child: ImageDescWidget(),
)
Copy the code
Before the filter After the filter After filter – pink

Other build methods

In addition to colorfilter. mode, if we look at the source code of ColorFilter, we can also find several construction methods as follows

  • ColorFilter.linearToSrgbGamma()

Construct a filter channel that applies sRGB gamma curves to RGB

ColorFiltered(
  colorFilter: ColorFilter.linearToSrgbGamma(),
  child: ImageDescWidget(),
)
Copy the code
  • The effect

  • ColorFilter.srgbToLinearGamma()

Create a color filter that applies the inversion of the sRGB gamma curve to the RGB channel

  • ColorFilter.matrix

Construct a color filter that transforms colors through a 5×5 matrix

// Convert the matrix to a color filter
const ColorFilter sepia = ColorFilter.matrix(<double> [0.393.0.769.0.189.0.0.0.349.0.686.0.168.0.0.0.272.0.534.0.131.0.0.0.0.0.1.0,]); ColorFiltered( colorFilter: sepia, child: ImageDescWidget(), )Copy the code
  • The effect

Questions about the

What would you do if PM asks you to uniformly set the App to gray on special festivals?

The implementation code

// Set the outermost layer of the App
ColorFiltered(
  colorFilter: ColorFilter.mode(
    // Set the blending colors and modes
    Colors.grey,
    BlendMode.saturation,
  ),
  child: MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: MyHomePage(title: 'Flutter Widgets'),),)Copy the code

Running effect

ImageFiltered (Image filter)

Don’t be fooled by the name, as we have seen above, Image shaders are handled by the ColorFilter, everything in the Flutter is Widget, so the ImageFiltered here is not meant to apply to the Image, It’s just that some of the filters that we normally apply to images are implemented here.

Imagefilter.blur (blur filter)

How do I add blurring effects to widgets in Flutter? That’s what we’re going to do, so let’s see how we’re going to do that, okay

  • Code implementation
ImageFiltered(
  // Set the blur filter
  imageFilter: ImageFilter.blur(
    sigmaX: 4,
    sigmaY: 4.// tileMode: TileMode.clamp,
    // tileMode: TileMode.decal,
    // tileMode: TileMode.mirror,
    // tileMode: TileMode.repeated,
  ),
  child: ImageWidget(),
)
Copy the code
  • preview
The original image The fuzzy degree of 4 The fuzzy degree of 6

Here you can see that as the ambiguity increases, the Widget size expands outward with the radius and distance of the response, filling in a way that looks like it’s not an isometric scaling stretch in general

  • TileMode – Tiling mode
TileMode. Clamp (default) TileMode.decal


Beyond the area, tiled with the color closest to the edge		 Gradient transparency beyond the region
TileMode.mirror TileMode.repeated


The overpass region mirrors back and forth with the inside region

Repeat tiling over area

ImageFilter. Matrix (Matrix filter)

Here can be achieved through matrix transformation, translation, scaling, rotation, tilting some column operations

  • Code implementation
ImageFiltered(
  / / zoom
  imageFilter: ImageFilter.matrix(Matrix4.diagonal3Values(2.2.0).storage),
  / / tilt
  // imageFilter: ImageFilter.matrix(Matrix4.skewY(pi / 8).storage),
  child: ImageWidget(),
  / / Widget
  // child: ImageDescWidget(),
)
Copy the code
  • The effect
The zoom tilt
  • Effect of the Widget
The zoom tilt

Pose (combination filter)

Above we are talking about a single filter effect, in many cases we need to use a combination of filters, this can be used, let’s look at the effect directly

  • In the code
ImageFiltered(
  imageFilter: ImageFilter.compose(
    / / fuzzy
    outer: ImageFilter.blur(
      sigmaX: 4,
      sigmaY: 4,),/ / tilt
    inner: ImageFilter.matrix(Matrix4.skewY(pi / 8).storage),
  ),
  child: ImageDescWidget(),
)
Copy the code
  • See the effect

BackdropFilter

The above content is to add filters to the entire Widget. Many times, if we want to achieve the effect of the background filter, we need to add Stack to achieve this

Look at the source code

You can see the source code is very simple, where the filter is directly ImageFilter filter, so the above filters can be used.

In the code

Stack(
  alignment: Alignment.bottomCenter,
  children: [
    / / the background
    ImageWidget(),
    // Add clipping
    ClipRect(
      child: BackdropFilter(
        // Blur filter
        filter: ImageFilter.blur(
          sigmaX: 4,
          sigmaY: 4,),// Set the child
        child: Container(
          color: Colors.white.withOpacity(0.4),
          alignment: Alignment.center,
          padding: const EdgeInsets.all(6),
          child: Text(
            '🌸 cherry blossom 🌸',
            style: TextStyle(
              color: Colors.white,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    ),
  ],
)
Copy the code

See the effect

  • If we don’t add clipping

  • If change toImageFiltered
Stack(
  alignment: Alignment.bottomCenter,
  children: [
    / / the background
    ImageWidget(),
    // Add clipping
    ImageFiltered(
      // Blur filter
      imageFilter: ImageFilter.blur(
        sigmaX: 0.5,
        sigmaY: 0.5,),// Set the child
      child: Container(
        color: Colors.white.withOpacity(0.4),
        alignment: Alignment.center,
        padding: const EdgeInsets.all(6),
        child: Text(
          '🌸 cherry blossom 🌸',
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ),
  ],
)
Copy the code
  • Results the following

BackdropFilter and ImageFiltered

Compare the item BackdropFilter ImageFiltered
Function object Background content Items as a whole
scope Overall background, need to add clipping Size of the item

Source warehouse

Based on the latest version of Flutter 🔥

  • Flutter Widgets warehouse

Refer to the link

  • ColorFiltered (Flutter Widget of the Week)
  • Flutter-ColorFiltered
  • ImageFiltered (Flutter Widget of the Week)
  • Flutter-ImageFiltered
  • BackdropFilter (Flutter Widget of the Week)
  • Flutter-BackdropFilter

Pay attention to column

  • This article has been included in the column at 👇 below, you can follow it directly
  • Read more | The series continues to be updated

👏 welcome to like ➕ collect ➕ pay attention, please feel free to comment on 👇 if you have any questions, I will reply as soon as possible