Backdrop filter (blur effects) in Flutter - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the BackdropFilter widget do in Flutter?

BackdropFilter applies a filter to the existing painted content beneath its child widget, such as a blur effect, making the background appear blurred behind the child.

beginner

Which class is used to create a blur effect with BackdropFilter in Flutter?

The ImageFilter class with the blur method is used, for example: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0).

intermediate

Why do you need to use a Stack widget when applying a BackdropFilter?

Stack allows layering widgets so that BackdropFilter can blur the widgets painted beneath it, creating the blur effect behind the child widget.

intermediate

What happens if you use BackdropFilter without an opaque child widget?

If the child is not opaque (like a transparent Container), the blur effect will be visible. If the child fully covers the area with an opaque color, the blur won't be visible.

beginner

How can you control the strength of the blur effect in BackdropFilter?

By adjusting the sigmaX and sigmaY values in ImageFilter.blur; higher values create stronger blur.

Which widget is used to apply a blur effect to the background in Flutter?

A BackdropFilter

B Container

C Opacity

D Transform

BackdropFilter applies a filter like blur to the painted content behind its child.

What does the sigmaX parameter control in ImageFilter.blur?

A Horizontal blur intensity

B Vertical blur intensity

C Blur color

D Blur radius in pixels

sigmaX controls the horizontal blur strength; sigmaY controls vertical blur.

Which widget helps layer widgets so BackdropFilter can blur the background?

A ListView

B Row

C Stack

D Column

Stack layers widgets on top of each other, allowing BackdropFilter to blur widgets beneath.

If the child of BackdropFilter is fully opaque, what happens to the blur effect?

A Blur is stronger

B Blur is not visible

C Blur changes color

D Blur animates

An opaque child blocks the blur effect from being visible.

Which import is needed to use ImageFilter.blur in Flutter?

A package:flutter/material.dart

B package:flutter/widgets.dart

C dart:async

D dart:ui

ImageFilter is part of dart:ui library.

Explain how to create a blur effect behind a widget using BackdropFilter in Flutter.

Think about layering widgets and applying a filter to the background.

Describe why the child widget's opacity affects the visibility of the blur effect in BackdropFilter.

Consider how the blur is applied behind the child.