Preface:

This is the 29th day of my participation in the August More Text Challenge. In preparation for the Nuggets’ August challenge, I’m going to pick 31 components this month that I haven’t covered before for a full analysis and attribute presentation. These articles will serve as important material for future compilation of Flutter components. I hope I can stick to it, your support will be my biggest motivation ~

This series Component articles The list of
1.NotificationListener 2.Dismissible 3.Switch
4.Scrollbar 5.ClipPath 6.CupertinoActivityIndicator
7.Opacity 8.FadeTransition 9. AnimatedOpacity
10. FadeInImage 11. Offstage 12. TickerMode
13. Visibility 14. Padding 15. AnimatedContainer
16.CircleAvatar 17.PhysicalShape 18.Divider
Flexible, Expanded, and Spacer 20.Card 21.SizedBox
22.ConstrainedBox 23.Stack 24.Positioned
25.OverflowBox 26.SizedOverflowBox 27. DecoratedBox
28. BackdropFilter 29. ImageFiltered and ColorFiltered

ImageFiltered component

1. Recognize the ImageFiltered component

The BackdropFilter component is used to add a filter layer below the child component, so this effect does not apply to the child component. ImageFiltered places the filter layer on top of the child component, meaning that the filter effect can be applied to the child component.

It inherits from SingleChildRenderObjectWidget, must be introduced into imageFilter parameter, type of imageFilter. This is the same as imageFilter in the BackdropFilter component.

2. Use of ImageFiltered component

Below is the effect of blurring the image with ImageFiltered. The imageFilter parameter is used in the same way as BackdropFilter and will not be described here.

1 * 1 2 * 2 3 * 3 5 * 5 
class ImageFilteredDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ImageFiltered(
            imageFilter: ImageFilter.blur(
              sigmaX: 2,
              sigmaY: 2,
            ),
            child: Image.asset(
                'assets/images/sabar.webp',
                fit: BoxFit.cover,
                width: 150,
                height: 150,),); }}Copy the code

Also, ImageFiltered is not limited to the Image component. Below, the whole FlutterUnit is processed with ImageFiltered, so that the whole application will have a blur effect. This doesn’t make much sense, except that ImageFiltered can handle any component.

– – – 
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // Roll performance optimization 1.22.0GestureBinding.instance? .resamplingEnabled =true;
  runApp(BlocWrapper(
    child: ImageFiltered(
      imageFilter: ImageFilter.blur(
        sigmaX: 2,
        sigmaY: 2,
      ),
      child: FlutterUnit(),
    ),
  ));
}
Copy the code
3.ImageFiltered component source code implementation

ImageFiltered inherited from SingleChildRenderObjectWidget, internal maintenance _ImageFilterRenderObject rendering object to achieve the function add color filter.

Create the ImageFilterLayer object Layer in _ImageFilterRenderObject#paint and set the passed imageFilter to the layer. Add a layer with context.pushLayer to implement the filter function.

Second, ColorFiltered component

1. Identify the ColorFiltered component

ColorFiltered inherited from SingleChildRenderObjectWidget, must be introduced into colorFilter parameter, type of ImageFilter.

2. Use of the ColorFiltered component

ColorFiltered is constructed in four ways,.srGbTolineargamma and.LinearToSrGbgamma are fixed processing effects; Mode is the color processing by color and blend mode. Matrix can be used for color matrix transformation. This section is a bit more complicated and will not be discussed in detail. If you are interested, please refer to chapter 8 of the Guide to Flutter Drawing, which gives a detailed description of shaders.

//srgbToLinearGamma
ColorFiltered(
  colorFilter: ColorFilter.srgbToLinearGamma(),
  child:  Image.asset(
    'assets/images/sabar.webp',
    fit: BoxFit.cover,
    width: 150,
    height: 150,),)//linearToSrgbGamma
ColorFiltered(
  colorFilter: ColorFilter.linearToSrgbGamma(),
  child:  Image.asset(
    'assets/images/sabar.webp',
    fit: BoxFit.cover,
    width: 150,
    height: 150,),)//.matrix
ColorFiltered(
  colorFilter: ColorFilter.matrix(<double> [1.0.0.0.110.0.1.0.0.110.0.0.1.0.110.0.0.0.1.0
  ]),
  child:  Image.asset(
    'assets/images/sabar.webp',
    fit: BoxFit.cover,
    width: 150,
    height: 150,),),Copy the code

Similarly, ColorFiltered is not limited to the Image component. As shown below, the whole FlutterUnit uses ColorFiltered for gray processing, so that the whole application will have a color effect, indicating that ColorFiltered can process any component. This can be very useful in some situations.

– – – 
ColorFiltered(
  colorFilter: 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: FlutterUnit(),
),
Copy the code

In fact, with the matrix can operate color transformation, there will be a lot of space to play, and it can act on any component, to make a global nostalgic color is not impossible. This matrix thing, the possibilities are infinite.

3.ColorFiltered component source code implementation

May be there are concerns that the performance of what, actually looked at so many SingleChildRenderObjectWidget, we also can know some characteristics. ColorFiltered is defined by _ColorFilterRenderObject.

A layer of ColorFilterLayer is added during drawing for coloring. It’s like having a red diaphragm in front of your eyes and seeing everything in the world red, rather than the diaphragm having the power to change the world and actually dye everything in the world red.

ColorFiltered is the same. It is just a masking layer. Not all components are filtered red, so don’t worry too much. Opacity, ClipRect, the Transform of such functional component is by adding the corresponding layer of functionality, so ColorFilterLayer also is an ordinary SingleChildRenderObjectWidget.

That’s the end of this article. Thanks for watching and see you tomorrow