How to implement BackDrop Filter in Flutter

Flutter Backdrop Filter Widget is utilized to make blurring impacts on pictures, Containers, and every one of the widgets. Backdrop Filter widget is utilized with a mix of ImageFilter classes. It applies a filter on the current widget and makes the blur impact underneath the current widget. As far as anyone knows we have an image widget so we put the image widget first at that point put the Backdrop Filter widget as its child. Sometimes we need to apply a blurry frosted glass effect on our application. How can we create such an effect if you’re using Flutter? A widget called BackdropFilter is suitable for that purpose. In this article, we are going to show how to use that widget for creating a blur effect, which is also known as the frosted glass effect.

BackdropFilter is a widget that applies a filter to the existing painted content and then paints its child widget. Flutter will apply the filter to all areas within its parent widget’s clip. That means if there’s no clip, the filter will be applied to the entire screen.

Some of the Properties used in the BackDrop Filter are given below.

filterimage filter to apply to the existing painted content before painting the child.
childthe widget below this widget in the tree
keyused to control if it should be replaced

Let’s take an example of how we can implement the BackDrop filter in our flutter application.

import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:vlogpost/screen/succssfulpage.dart';

class BackDropScreen extends StatefulWidget {
  const BackDropScreen({Key? key}) : super(key: key);

  @override
  State<BackDropScreen> createState() => _BackDropScreenState();
}

class _BackDropScreenState extends State<BackDropScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BackDrop Filter'),
        centerTitle: true,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: ElevatedButton(
              onPressed: () => showAlert(context),
              child: const Text('Show BackDrop Filter'),
            ),
          )
        ],
      ),
    );
  }

  Future<void> showAlert(BuildContext context) {
    return showDialog(
        context: context,
        barrierColor: Colors.grey.shade400.withOpacity(0.8),
        builder: (context) {
          return BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
            child: AlertDialog(
              clipBehavior: Clip.antiAlias,
              elevation: 0,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15),
              ),
              title: const Center(
                  child: Text(
                'Do you want to add more item ?',
                textAlign: TextAlign.center,
              )),
              content: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (_) => const SuccessfulPageScreen()));
                    },
                    child: const Text('OK'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: const Text('Cancel'),
                  ),
                ],
              ),
            ),
          );
        });
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

If we click the “Show BackDrop Filter” button, we will see the message at the bottom of the screen. which is shown below

Thank you for reading the guide about how to implement the BackDrop Filter in Flutter.

Also read: RGB And Hex Color Codes In Flutter