Flutter如何实现ImageFiltered效果

在Flutter中，如何使用ImageFiltered控件实现图片的模糊、锐化或其他滤镜效果？能否提供一个具体的代码示例，说明如何调整参数以达到不同的视觉效果？另外，ImageFiltered的性能如何，是否会影响应用的流畅度？

2 回复

Flutter中使用ImageFiltered组件实现图像滤镜效果。通过ImageFilter类设置滤镜，如高斯模糊ImageFilter.blur或矩阵变换ImageFilter.matrix。示例：

ImageFiltered(
  imageFilter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
  child: Image.network('url'),
)

更多关于Flutter如何实现ImageFiltered效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，ImageFiltered 是一个内置组件，用于对子组件应用图像滤镜效果。它基于 BackdropFilter，但更易于使用，专门用于模糊、颜色调整等图像处理。

基本用法

ImageFiltered(
  imageFilter: ui.ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0), // 模糊效果
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
    child: Text('模糊效果示例'),
  ),
)

常用滤镜类型

  1. 模糊效果：

    ui.ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0)

    sigmaX 和 sigmaY 控制模糊强度。

  2. 矩阵变换（颜色调整等）：

    ui.ImageFilter.matrix(Matrix4.identity().storage)

    可结合 ColorFilter.matrix 实现饱和度、对比度调整。

  3. 组合滤镜：

    ui.ImageFilter.compose(
  outer: ui.ImageFilter.blur(sigmaX: 3, sigmaY: 3),
  inner: ui.ImageFilter.matrix(Matrix4.identity().storage),
)

完整示例

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

class ImageFilteredExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ImageFiltered(
          imageFilter: ui.ImageFilter.blur(sigmaX: 2.0, sigmaY: 2.0),
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(20),
            ),
            child: Center(child: Text('模糊容器')),
          ),
        ),
      ),
    );
  }
}

注意事项

  • 性能：模糊效果较耗性能，避免在高频动画中使用。
  • 边界处理：模糊可能溢出子组件边界，可通过 ClipRect 限制：
    ClipRect(
  child: ImageFiltered(...),
)

使用 ImageFiltered 可快速实现视觉特效，适合需要简单图像处理的场景。

回到顶部