Backdrop filter (blur effects) in Flutter - UI Render Trace

Component - Backdrop filter (blur effects)

This UI component shows how to apply a blur effect behind a widget using a backdrop filter. It creates a frosted glass look by blurring the background behind a semi-transparent container.

Widget Tree

Scaffold
├─ Stack
│  ├─ Image (background)
│  └─ BackdropFilter
│     └─ Container (semi-transparent)
└─ Center
   └─ Text

The Scaffold holds the whole screen. Inside, a Stack places an Image as the background. On top of the image, a BackdropFilter applies a blur effect. Inside the BackdropFilter, a semi-transparent Container shows the blurred area. Finally, a Center widget places a Text label on top.

Render Trace - 7 Steps

Step 1: Scaffold

Step 2: Stack

Step 3: Image

Step 4: BackdropFilter

Step 5: Container

Step 6: Center

Step 7: Text

State Change - Re-render

Trigger:No state change in this static blur example

Before

Blur effect applied with sigmaX and sigmaY set to 5

→

After

No change, blur remains constant

Re-renders:No re-render triggered as no state changes

UI Quiz - 3 Questions

What does the BackdropFilter widget do in this UI?

A It adds a shadow to the container

B It blurs the content behind it

C It changes the color of the text

D It moves the image to the front

Key Insight

Using BackdropFilter with a blur effect lets you create a frosted glass look by blurring whatever is behind a widget. Combining it with a semi-transparent container helps the blur show nicely, making UI elements stand out while keeping background context visible.