BackdropFilter widget and Attributes

The BackdropFilter widget in Flutter is used to apply filter effects to its child widget, typically used to blur or apply color effects to the background. It's commonly used to create visually appealing effects such as blurring the background behind a dialog or overlaying color filters on images.

Attributes:

1. filter (ui.ImageFilter):

   • The filter to apply to the child widget. It's typically a ui.ImageFilter object representing the desired filter effect, such as ui.ImageFilter.blur() for blurring.

2. child (Widget):

   • The widget on which the filter effect should be applied.

Example:

import 'package:flutter/material.dart';

class BackdropFilterExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BackdropFilter Widget Example'),
      ),
      body: Center(
        child: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Image.network(
              'https://via.placeholder.com/400',
              fit: BoxFit.cover,
            ),
            Center(
              child: Container(
                width: 200,
                height: 200,
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
                  child: Center(
                    child: Text(
                      'Blurry Text',
                      style: TextStyle(
                        fontSize: 24,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: BackdropFilterExample(),
  ));
}

Explanation:

• In this example, a BackdropFilter widget is used to apply a blur effect to its child widget.

• The child widget is a Text widget displaying "Blurry Text".

• The BackdropFilter widget is wrapped around the Text widget, and the filter attribute is set to ImageFilter.blur(sigmaX: 5, sigmaY: 5) to create a blur effect with a sigma value of 5 in both horizontal and vertical directions.

• As a result, the text appears blurry, creating a visually appealing effect on top of the background image.