Blog

This a flutter BackdropFilter step by step example.

Example 1: Simple BackdropFilter

Here is the demo screenshot of this example:

This example will comprise the following files:

• BackdropFilterExample.dart

Step 1: Create Project.

1. Open your favorite Flutter IDE.
2. Go to File-->New-->Project to create a new project.

Step 2: Dependencies.

No external dependencies are needed for this project.

Step 4: Write Dart Code

Write your code as follows:

*(a). BackdropFilterExample.dart

Create a file Dart named BackdropFilterExample.dart

Here is the full code

import 'dart:ui';
import 'package:flutter/material.dart';
class BackdropFilterExample extends StatelessWidget {
  final String title;
  const BackdropFilterExample(this.title);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Stack(
          children: <Widget>[
            const FlutterLogo(
              size: 200.0,
            ),
            ClipRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                child: Container(
                  width: 200.0,
                  height: 200.0,
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.5),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Run

Simply copy the source code into your Flutter Project, Build and Run.

Reference.

Download code here.
Follow code author here.