Flutter实现图片滤镜效果

 更新时间:2021年04月01日 10:20:52   作者:一天  
这篇文章主要介绍了Flutter如何实现图片滤镜效果,帮助大家更好的理解和学习使用Flutter,感兴趣的朋友可以了解下

本着学习的态度,研究了一下flutter里面的ColorFilter,字面意思翻译颜色过滤器,学习就是要举一反三,拓展思考就把这个功能做了一个简单的图片滤镜效果。(ps:图片有点没控制住,有点长) 效果如下:

ColorFilter 介绍

两种使用方式

const ColorFilter.mode(Color color, BlendMode blendMode)
const ColorFilter.matrix(List<double> matrix)

实现效果主要通过第一种方式, 首先创建一个MorningPainter类继承CustomPainter, 定义三个传入的变量

ui.Image img;
Color color;
String mode;
MorningPainter(this.img, this.color, this.mode);

@override
void paint(Canvas canvas, Size size) {
  var paint = Paint();
  if (color != Colors.white) {
   BlendMode blendMode = BlendMode.clear;
   switch (mode) {
    case 'modulate':
     blendMode = BlendMode.modulate;
     break;
    case 'difference':
     blendMode = BlendMode.difference;
     break;
    case 'plus':
     blendMode = BlendMode.plus;
     break;
    case 'lighten':
     blendMode = BlendMode.lighten;
     break;
    default:
   }
   paint.colorFilter = ColorFilter.mode(color, blendMode);
  }
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;

选取图片

使用wechat_assets_picker进行图片的选择,选择之后进行转换

CustomPaint(
 size: Size(_img.width.toDouble(), _img.height.toDouble()),
 painter: MorningPainter(_img, currentColor, mode),
)

布局

最下方的颜色选择和模式选择,这个没什么可说的,使用简单的SingleChildScrollView配合Row使用就可以了。贴出其中一段代码

SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
       mainAxisAlignment: MainAxisAlignment.center,
       crossAxisAlignment: CrossAxisAlignment.center,
       children: [
        renderItem(Colors.yellow, '黄色'),
        renderItem(Colors.red, '红色'),
        renderItem(Colors.blue, '蓝色'),
        renderItem(Colors.pink, '粉色'),
        renderItem(Colors.orange, '橙色'),
        renderItem(Colors.brown, '棕色'),
        renderItem(Colors.grey, '灰色'),
       ],
      ),
     ),

最后的思考,学习是一件很有趣的事情, 特别是将所学到的知识运用起来,成就感很强烈。

以上就是Flutter实现图片滤镜效果的详细内容,更多关于Flutter 图片滤镜的资料请关注脚本之家其它相关文章!

相关文章

  • Android实现图片异步加载及本地缓存

    Android实现图片异步加载及本地缓存

    这篇文章主要介绍了Android实现图片异步加载及本地缓存的相关资料,需要的朋友可以参考下
    2016-02-02
  • Android中的Bitmap的详细介绍

    Android中的Bitmap的详细介绍

    本篇文章主要介绍了Android中的Bitmap,是Windows标准格式图形文件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Android使用vitamio插件实现视频播放器

    Android使用vitamio插件实现视频播放器

    这篇文章主要为大家详细介绍了Android使用vitamio实现视频播放器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-04-04
  • android仿支付宝密码输入框效果

    android仿支付宝密码输入框效果

    这篇文章主要为大家详细介绍了android仿支付宝密码输入框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • Android 使用fast-verification实现验证码填写功能的实例代码

    Android 使用fast-verification实现验证码填写功能的实例代码

    这篇文章主要介绍了Android 使用fast-verification实现验证码填写功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • Android AsyncTask源码分析

    Android AsyncTask源码分析

    这篇文章主要针对Android AsyncTask源码为大家进行分析,非常方便的AsyncTask类内部封装了Handler和线程池,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 教你安装配置Android Studio

    教你安装配置Android Studio

    对于Android Studio相信大家都不陌生了,作为谷歌推出的安卓开发工具,做过java的同学应该都了解,下面我们就简单介绍下这款工具的安装预配置
    2015-12-12
  • Android开发保存QQ密码功能

    Android开发保存QQ密码功能

    这篇文章主要为大家详细介绍了Android开发保存QQ密码功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Android实现井字游戏

    Android实现井字游戏

    这篇文章主要为大家详细介绍了Android实现井字游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • 详解Android短信的发送和广播接收实现短信的监听

    详解Android短信的发送和广播接收实现短信的监听

    本篇文章主要介绍了Android短信的发送和广播接收实现短信的监听,可以实现短信收发,有兴趣的可以了解一下。
    2016-11-11

最新评论