Reputation: 135
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:
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:
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:
My question still holds tho.
Upvotes: 0
Views: 946
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