Flutter如何实现图片滤镜效果

各位大佬，最近在用Flutter开发一个图片编辑功能，想给图片加滤镜效果，比如黑白、复古这些。不知道Flutter有没有现成的库或者插件可以实现？或者需要自己写shader？求推荐靠谱的方案和代码示例！

2 回复

Flutter中可通过ImageFiltered组件或第三方库（如image）实现图片滤镜。使用ImageFiltered可应用高斯模糊等效果，而image库支持更多自定义滤镜，如色调调整、对比度等。

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


在Flutter中实现图片滤镜效果，主要有以下几种方式：

1. 使用ColorFiltered组件（最简单）

ColorFiltered(
  colorFilter: ColorFilter.mode(
    Colors.red.withOpacity(0.5), // 红色滤镜
    BlendMode.color,
  ),
  child: Image.network('https://example.com/image.jpg'),
)

常用滤镜效果：

// 黑白效果
ColorFilter.matrix(<double>[
  0.2126, 0.7152, 0.0722, 0, 0,
  0.2126, 0.7152, 0.0722, 0, 0,
  0.2126, 0.7152, 0.0722, 0, 0,
  0,      0,      0,      1, 0,
])

// 复古效果
ColorFilter.matrix(<double>[
  1, 0, 0, 0, 0,
  0, 0.8, 0, 0, 0,
  0, 0, 0.6, 0, 0,
  0, 0, 0, 1, 0,
])

2. 使用ShaderMask（渐变滤镜）

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [Colors.red, Colors.blue],
    ).createShader(bounds);
  },
  blendMode: BlendMode.modulate,
  child: Image.asset('assets/image.png'),
)

3. 使用image包处理（需要导入依赖）

在pubspec.yaml中添加：

dependencies:
  image: ^4.0.17

代码示例：

import 'package:image/image.dart' as img;

// 转换为黑白
img.Image applyGrayscale(img.Image image) {
  return img.grayscale(image);
}

// 调整亮度对比度
img.Image adjustBrightnessContrast(img.Image image, {double brightness = 0, double contrast = 0}) {
  return img.adjustColor(image, brightness: brightness, contrast: contrast);
}

4. 使用第三方库

推荐使用photo_filter或image_editor库：

dependencies:
  photo_filter: ^2.3.0

import 'package:photo_filter/photo_filter.dart';

// 应用预设滤镜
FilterableWidget(
  image: Image.asset('assets/image.png'),
  filters: PhotoFilter.represetFilters,
)

选择建议：

  • 简单效果：使用ColorFiltered或ShaderMask
  • 复杂处理：使用image包
  • 完整滤镜功能：使用第三方库

这些方法都能有效实现图片滤镜效果，根据具体需求选择合适的方式即可。

回到顶部