Creating Image Effects with BackdropFilter in Flutter

Creating Image Effects with BackdropFilter

In this article, we will look at some good Image Effects that is possible on Flutter using BackdropFilter. The Widget as such is really straightforward, provides a Child attribute and a Filter attribute. Playing with this Filter attribute creates really good effects native to Flutter and doesn’t require importing Edited Pictures(Even though it might seem easy).

We will look at what the Widget is, and understand the two attributes related to it. Then, take a look at all the effects that are possible through this Widget in Flutter.

BackdropFilter – Widget Basics

To make use of the BackdropFilter, use the Class given below,

BackdropFilter()

The important part of using the BackdropFilter is that the Child should be stacked below this Widget. The filter is applied like it is applied to a Container and it creates the Image Effects that is required.

BackdropFilter – Attributes

The 2 important attributes of the BackdropFilter Includes

  • child – As the name suggests, it can be a Container or any constraints that need to be applied to the BackdropFilter Widget. This cannot be an Image Widget as it cannot apply Filters to itself.
    child: Container(
      decoration: BoxDecoration(
        color: Colors.grey.shade100.withOpacity(0.2),
      )

    Like the above snippet. The child can take in any Container or Box Widgets to provide that overlay effect on the elements below it.

  • filter – Filter applies the Required ImageFilter class. It can either be Matrix/Blur and it applies these Filters to the Widgets below it.
    filter: ImageFilter.blur(sigmaX: 5, sigmaY: 6),

    The filter attribute can take only the ImageFilter class as its value. This value can be either a blur or a Matrix. We will look at examples for these two scenarios below.

We can see how this can work for 3 different scenarios as given in the below example.

Creating a Blur Image using Backdrop Filter Widget

  1. Create a simple Stack Widget
  2. Stack the Image at the first(Bottom of the Stack).
  3. Create the BackdropFilter as the next children
  4. Apply the ImageFilter.blur value to the class
  5. Include Box decoration if required for the Child.

Going through the above steps, we have the following code that is created. We use the Image.Network as it is easy to get an image from the internet easily using the ImageWidget in Flutter.
The example program below uses the Scaffold widget and includes the Container widget to create a good cleaner UI. Additionally, Stack Widget helps in aligning the Images on the UI.

import 'dart:ui';

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title: 'Androidmonks',
    home: Scaffold(
      appBar: AppBar(title: Text("Backdrop Filter"),),
      body: Stack(
        children: <Widget>[
          ConstrainedBox(
            child: Image.network("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"),
            constraints: BoxConstraints.expand(),
          ),
          Container(
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 5, sigmaY: 6),
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.grey.shade100.withOpacity(0.2),
                )
              ),
            ),
          ),
        ],
      ),

    ),
  ));
}

This creates a Flutter App, which looks like,

BackdropFilter with Image.Blur
BackdropFilter with Image.Blur

We can additionally do spot blurring of the Images also, by modifying the Container values.

Other Image Manipulations

Current Flutter/Dart package includes the use of Matrix4 class. Current documentation is not clear to Implement the ImageFilter.matrix().

I will keep this article alive to make sure that this feature can also be included as part of this tutorial.

Stacking Images can create better Visual effects as such, and for now, Transform widget can be used.

If there are any suggestions/comments, drop them below.

“Learn and Be Curious”

Leave a Comment

Your email address will not be published. Required fields are marked *