Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

backdrop
filter
flutter
communitycreator

What is the BackdropFilter class in Flutter?

Hammad Qayyum

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Overview

Flutter is an open-source framework created by Google. It is used to build efficient, natively compiled, and multi-platform applications from a single codebase.

BackdropFilter

In Flutter, we use the BackdropFilter class to apply a filter to the existing painted content and to paint the child.
This class is applied to the area under its parent or ancestor widget. If there is no such widget, we apply the class to the whole screen.

Parameters

We use the blendMode parameter to show that the results of the filter are blended back into the background.

BlendMode.srcOver is the most common value for the blendMode parameter. It is supported on all the platforms and works for most cases during development.

Assuming that the BackdropFilter class is applied to an area that precisely matches its child, it wraps this class with a clip widget that clips precisely to that child.

Example

Stack(
fit: StackFit.expand,
children: <Widget>[
Image.network('https://picsum.photos/250?image=9'),
Center(
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: Container(
alignment: Alignment.bottomCenter,
width: 300.0,
height: 300.0,
child: const Text('New TEXT on blur screen'),
),
),
),
),
],
Backdrop filter

Explanation

  • Line 1–5: We use Stack and provide a text child.
  • Line 6–7: We make another child, ClipRect, and apply the Backdropfilter method to its child.
  • Line 8–11: We use the blur property and assign values to sigmaX and sigmaY.
  • Line 12–16: We provide a new text widget to its child.

RELATED TAGS

backdrop
filter
flutter
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring