Preface:

This is the 28th day of my participation in the August 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

1. Learn about the BackdropFilter component

The BackdropFilter component may be less used, but it’s still powerful. It is described in the source code: add a filter to the existing draw content and then draw its children.

Below is BackdropFilter component class definition and construction method, it can be seen that it inherited from SingleChildRenderObjectWidget. The size filter parameter, of type ImageFilter, must be passed when constructed.

final ui.ImageFilter filter;
Copy the code

2. The use of BackdropFilter

Source code there is a BackdropFilter component test case, we first based on this case, look at the effect and role of BackdropFilter. In the image below, there are three areas: 01 text, purple text, Hello World text. This is done by stacking the 01 text with the BackdropFilter through the Stack, where the purple area and the Hello World text are child components of BackdropFilter.

class CustomBackdropFilter extends StatelessWidget {
  final Random random = Random();

  @override
  Widget build(BuildContext context) {
    String data = ' ';
    for (int i = 0; i < 10000; i++) {
      data += random.nextBool() ? "0" : "1";
    }

    return Stack(
      children: <Widget>[
        Text(data),
        Center(child: buildFilterZone(),),
      ],
    );
  }

  Widget buildFilterZone() {
    return BackdropFilter(
      filter: ui.ImageFilter.blur(
        sigmaX: 2.0,
        sigmaY: 2.0,
      ),
      child: Container(
        alignment: Alignment.center,
        width: 200.0,
        height: 120.0,
        color: Colors.purple.withOpacity(0.1),
        child: const Text(
          'Hello World',
          style: TextStyle(fontSize: 24),),),); }}Copy the code

As you can see from the layout viewer, the BackdropFilter area is only purple, and the blur mask does not affect its children. It’s like overlaying a layer of ambiguity on top of a component, but the child components are on top of the layer of ambiguity.

Sometimes we may just mask an area, which can be clipped using clipping components such as ClipRRect so that the blur layer does not affect the rest of the area. Here is the clipping effect for a rounded rectangle:

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: buildFilterZone(),
),
Copy the code

3. Know ImageFilter

First of all, ImageFilter is an abstract class, but it can create objects through named constructs, which can be constructed in three ways.

In the case of Imagefilter.blur, you can see that the constructor has a factory keyword in front of it to allow the abstract class to create objects as well. You can see that this construct essentially uses _GaussianBlurImageFilter, also known as gaussian blur. The two input parameters sigmaX and sigmaY are the degree of ambiguity.

For example, here is the effect of x:2.0,y:2.0:

This is the effect of x:4.0,y:1.0:

This is the effect of x:6.0,y:6.0:

See that sigmaX and sigmaY control the degree of ambiguity in the X and Y directions, respectively.

In addition to creating a blur mask using Imagefilter. blur, you can also perform matrix transformations within the region using Imagefilter. matrix, as shown in skewX.

Widget buildFilterZone() {
  return BackdropFilter(
    filter:
    ui.ImageFilter.matrix(Matrix4.skewX(45/180*pi).storage),
    child: Container(
      alignment: Alignment.center,
      width: 200.0,
      height: 120.0,
      color: Colors.blueAccent.withOpacity(0.1),
      child: const Text(
        'Hello World',
        style: TextStyle(fontSize: 24),),),); }Copy the code

4. BackdropFilter component source code implementation

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

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

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