ImageFiltered widget and Attributes

The ImageFiltered widget in Flutter is used to apply a filter to its child widget, typically an Image widget. It allows you to apply various image filters, such as blurs or color adjustments, to achieve different visual effects.

Here are the main attributes of the ImageFiltered widget:

1. imageFilter:

   • Type: ImageFilter

   • Required: Yes

   • The imageFilter attribute is mandatory and represents the filter to be applied to the child widget. It is of type ImageFilter and can be configured with different filter effects.

Example of ImageFiltered Widget:

Let's consider an example to demonstrate the usage of the ImageFiltered widget. In this example, we'll create a blurred image using the ImageFiltered widget.

import 'dart:ui' as ui;
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ImageFiltered Example'),
        ),
        body: Center(
          child: ImageFiltered(
            imageFilter: ui.ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
            child: Container(
              width: 200,
              height: 200,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage('https://example.com/your_image.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
              child: Center(
                child: Text(
                  'Blurred Image',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

In this example:

• The ImageFiltered widget is used to wrap a Container containing text over an image.

• The imageFilter attribute is set to ImageFilter.blur with sigmaX and sigmaY values to create a blur effect. You can adjust these values for different levels of blurring.

• The Container has a background image fetched from a URL using NetworkImage.

• The child widget, in this case, is a text label placed at the center of the container.