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 MediaRecorder录制视频过短问题
本文主要介绍Android MediaRecorder,在使用MediaRecorder时经常会遇到视频录制太短问题,这里提供解决问题的实例代码以供大家参考2016-07-07android studio 一直卡在Gradle:Build Running的几种解决办法
这篇文章主要介绍了android studio 一直卡在Gradle:Build Running的解决办法,非常具有实用价值,需要的朋友可以参考下2017-10-10源码解析Android Jetpack组件之ViewModel的使用
Jetpack 是一个丰富的组件库,它的组件库按类别分为 4 类,分别是架构(Architecture)、界面(UI)、 行为(behavior)和基础(foundation)。本文将从源码和大家讲讲Jetpack组件中ViewModel的使用2023-04-04FragmentStatePagerAdapter保存恢复下拉刷新Fragment内存数据
这篇文章主要为大家介绍了FragmentStatePagerAdapter保存恢复下拉刷新Fragment内存数据分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-02-02Qt qml中listview 列表视图控件(下拉刷新、上拉分页、滚动轴)
这篇文章主要介绍了Qt qml中listview 列表视图控件(下拉刷新、上拉分页、滚动轴) 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-07-07
最新评论