rksilvergreen
rksilvergreen

Reputation: 135

How does BackdropFilter apply it's filter?

I'm very confused to as how the BackdropFilter widget works in Flutter. Intuitively I would expect the widget to simply apply a filter to the constraints of its child but that does not seem to be the case.

For example:

Column(
      children: [
        Text('Hello world 1'),
        BackdropFilter(filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), 
            child: Text('Hello world 2'),
        ),
        Text('Hello world 3'),
      ],
    )

The result of that code looks like this:

enter image description here

The first Text is blurred while the child is unaffected.

Also, if I were to try something like this:

child: Column(
    children: [
      Text('Hello world 0'),
      Container(
        child: Column(
          children: [
            Text('Hello world 1'),
            BackdropFilter(filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), 
               child: Text('Hello world 2'),
            ),
            Text('Hello world 3'),
          ],
        ),
      ),
    ],
  )

The result would be:

enter image description here

What are the mechanics here exactly? Does the filter only apply to the BackdropFilter's ancestors along with its siblings that were declared before it, but not to it's child? What's the purpose of the child?

P.S

I'm aware that adding a ClipRect somewhere in the tree would stop the application of the filter to any of it's ancestors or previously declared siblings as such:

Column(
    children: [
      Text('Hello world 0'),
      ClipRect(
        child: Container(
          child: Column(
            children: [
              Text('Hello world 1'),
              BackdropFilter(filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), child: Text('Hello world 2')),
              Text('Hello world 3'),
            ],
          ),
        ),
      ),
    ],
  )

Which would result in:

enter image description here

My question still holds tho.

Upvotes: 0

Views: 946

Answers (1)

Zvi Karp
Zvi Karp

Reputation: 3904

Flutters BackdropFilter is applied to children under it (e.g. in a stack) and not to it children. This way the BackdropFilter can be applied to multiple or part of widgets.

Upvotes: 2

Related Questions