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 图片滤镜的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Flutter深色模式适配的实现

    Flutter深色模式适配的实现

    一.简介 Flutter的深色模式以及跟随系统设置比较简单,我感觉需要注意的是开发过程中尽量使用Theme中的颜色与样式,开发过程中遇到的比较大的坑就是provider的一些问题,可能是因为我用的版本新一些,网上找了很多文章,总会遇到一些问题.本文的深色模式适配是通过修改themeMode来实现的,供诸位有缘人参考. 二.环境介绍 1. Flutter: 2.0.3 2. Dart: 2.12.0 3. provider: 5.0.0 状态管理,用于运行时切换主题 4. shared_prefe

  • 详解Flutter混排瀑布流解决方案

    详解Flutter混排瀑布流解决方案

    背景 流式布局,这是一种当前无论是前端,还是Native都比较流行的一种页面布局.特别是对于商品这样的Feeds流,无论是淘宝,京东,美团,还是闲鱼.都基本上以多列瀑布流进行呈现,容器列数固定,然后每个卡片高度不一,形成参差不齐的多栏布局. 对于Native来说,无论是iOS还是Android,CollectionView和RecyclerView都能满足我们的绝大部分场景了.不过目前闲鱼很多业务场景都是在Flutter上进行实现的,当时Flutter官方只提供了ListView和GridVie

  • 详解Flutter 调用 Android Native 的方法

    Flutter 调用 Android Native 的方法,是通过MethodChannel的方式来实现的: 在Android端: 创建一个Class,实现FlutterPlugin和MethodCallHandler接口 重写onAttachedToEngine(),onDetachedFromEngine(),onMethodCall() onAttachedToEngine()中,根据自定义的CHANNEL_NAME创建MethodChannel, onDetachedFromEngine

  • Flutter网络请求库DIO的基本使用

    1. 导入dio包 目前dio库的最新版本是3.0.1,同使用其他三方库一样,Flutter中使用dio库同样需要配置pubspec.yaml文件. dependencies: flutter: sdk: flutter dio: ^3.0.10 2. 导入并创建实例 dio包引入成功之后就可以创建dio实例了,一个实例可以发起多个请求,APP中如果只有一个数据源的情况下就可以考虑将dio实例创建成单例模式,这样可以节省系统资源,减少不必要的开销. //htpp.dart import 'pac

  • 新版Flutter集成到已有Android项目的实现

    FlutterSDK升级后,我们发现不能按照原来的方式集成到已有Android项目中了,因为没有了Flutter这个类,通过阅读源码我找到了新的使用方式. 一.创建Flutter Module 在已有Android工程中集成flutter,可以使用AndroidStudio的new Flutter Module实现,方便快捷. 找到FlutterModule,一连串的next操作即可 创建完成后我们的项目中会多一个叫做flutter的module 并且在项目的setting.gradle文件中会

  • 详解Flutter点击空白隐藏键盘的全局做法

    开发原生页面的时候,在处理键盘事件上,通常的需求是,点击输入框外屏幕,要隐藏键盘,同样的,这样的需求也需要在 Flutter 上实现, Android 上的实现方式是在基类 Activity 里实现事件分发,判断触摸位置是否在输入框内. /** * 获取点击事件 */ @CallSuper @Override public boolean dispatchTouchEvent(MotionEvent ev) { if (ev.getAction() == MotionEvent.MotionEv

  • 详解Flutter的路由导航

    Flutter 的路由导航 路由管理或导航管理:从一个页面平滑地过渡到另一个页面,我们需要有一个统一的机制来管理页面之间的跳转.在原生的Android 开发,是通过startActivity或startActivityForResult 来完成页面的跳转的,在Flutter 中如何实现呢? 在 Flutter 中,页面之间的跳转是通过 Route 和 Navigator 来管理的: Route 是页面的抽象,主要负责创建对应的界面,接收参数,响应 Navigator 打开和关闭: 而 Navig

  • Android原生项目集成Flutter解决方案

    了解一下如何在 Android 原生项目中集成 Flutter 生成配置 在原生项目根目录执行命令 flutter create -t module --org {package_name} {module_name} // 此处 module_name 的命令遵循 Android 子 module 的命名即可.不能有中划线. // 比如, flutter create -t module --org com.engineer.mini.flutter flutter_sub // 此处 mod

  • 浅谈Flutter解析JSON三种方式

    浅谈Flutter解析JSON三种方式

    Dart实体类格式 class CategoryMo { String name; int count; CategoryMo({this.name, this.count}); //将map转成mo CategoryMo.fromJson(Map<String, dynamic> json) { name = json['name']; count = json['count']; } //将mo转成map,可缺省 Map<String, dynamic> toJson() {

  • Flutter实现图片滤镜效果

    Flutter实现图片滤镜效果

    本着学习的态度,研究了一下flutter里面的ColorFilter,字面意思翻译颜色过滤器,学习就是要举一反三,拓展思考就把这个功能做了一个简单的图片滤镜效果.(ps:图片有点没控制住,有点长) 效果如下: ColorFilter 介绍 两种使用方式 const ColorFilter.mode(Color color, BlendMode blendMode) const ColorFilter.matrix(List<double> matrix) 实现效果主要通过第一种方式, 首先创建

  • 基于Flutter实现图片选择和图片上传

    基于Flutter实现图片选择和图片上传

    目录 内容简介 图片选择插件 权限申请 UI 改造 图片上传 内容简介 本篇将介绍 Flutter 中如何完成图片上传,以及上传成功后的表单提交.涉及的知识点如下: 图片选择插件wechat_assets_picker的使用. 图片选择 iOS 和安卓的应用权限配置. 图片选择组件的封装. 图片上传接口的封装. 添加和编辑页面中图片上传实现. 图片选择插件 Flutter 的图片选择插件很多,包括了官方的 image_picker,multi_image_picker(基于2.0出了 multi

  • Android Flutter实现图片滑动切换效果

    Android Flutter实现图片滑动切换效果

    目录 前言 SlideTransition 介绍 示例效果实现 总结 前言 我们开始来介绍转换类的动画组件,实际上这类转换动画组件也可以自己通过 AnimatedBuilder 或 AnimatedWidget 完成, Flutter 为了简化开发,提供了不少转换动画组件,这类组件通常命名为 xxTransition.本篇要介绍的就是 SlideTransition,顾名思义,就知道是滑动转换动画.我们本篇来实现两张小姐姐图片的滑动切换,效果如下图所示. SlideTransition 介绍 S

  • Flutter图片加载与缓存机制的深入探究

    Flutter图片加载与缓存机制的深入探究

    目录 前言 图片控件 图片解析 缓存管理 ​新增缓存 缓存清理 图片加载 滑动中处理 总结 前言 今天来学习一下 Flutter 自身是如何加载图片和管理图片的. Flutter 提供了一个图片控件 Image,Image 定义了若干中加载图片的方式,包括 Image.asset.Image.file.Image.network.Image.memory. Image内部维护了一个 ImageProvider对象,ImageProvider则真正维护整个图片加载的工作.Widget 本身内部是体

  • 利用Flutter实现背景图片毛玻璃效果实例

    利用Flutter实现背景图片毛玻璃效果实例

    目录 前言 使用 canvas 绘制图片 更改绘制图片的绘制范围 毛玻璃效果实现 总结 前言 继续我们绘图相关篇章,这次我们来看看如何使用 CustomPaint 实现毛玻璃背景图效果.毛玻璃背景图其实就是将图片进行一定程度的模糊,背景图经过模糊后更加虚幻,使得前景和后景就会有层次感.相比直接加蒙层的效果来说,毛玻璃看起来更加好看一些.下面是背景图处理前后的对比,我们的前景图片的透明度并没有改变,但是背景图模糊虚化后,感觉前景更加显眼了一样. 本篇涉及如下内容: 使用 canvas 绘制图片.

  • flutter中的资源和图片加载示例详解

    目录 封面图 指定相应的资源 资源绑定 Asset bundling 资源变体 加载资源 加载文本资源 加载图片 加载依赖包中的图片 最后 封面图 下个季度的目标是把前端监控相关的内容梳理出来,梳理出来之后可能会在公司内部做个分享- Flutter应用程序既括代码也包括一些其他的资产,我们通常这些资产为资源. 有时候我会思考assets这个单词,在程序中到底应该翻译为资产呢?还是翻译为资源?按照习惯,我们这里还是称为资源好了- 这些资源是一些与应用程序捆绑在一起和并且部署应用时会用到的的文件,在

  • 给图片在博客中添加滤镜效果

    给图片在博客中添加滤镜效果

    配合同事文章的技巧,用自己的博客来测试一下.首先插入一张测试图片: 终极技巧之图片篇:为图片添加滤镜效果 纯文字博客看上去会显得很枯燥,适当的配图能够让页面更美观,也能更好地表达自己的思想.那么如何为图片添加一些Photoshop里面才有的特殊滤镜效果呢?一张张修改图片吗?太烦琐了,更何况很多时候我们是引用网络上的图片地址,并没有对原图片的修改权限.这里有一个简单的方法,可以修改图片在博客上的显示效果.一般的博客编辑页面都有"插入图片"功能,此外还有"源代码编辑"模

  • 静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。

    静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。

    请新建文件TestImage.html注意:静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器.欢迎与邀月交流,net技术与软件架构内容如下,(可自行修改): 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • Flutter Image实现图片加载

    Image 简介 Android ios 原生中使用 ImageView 来加载显示图片. 在flutter 中通过Image来加载并显示图片. 所有的widget并不是直接绘制图片的,而是控制的图片的主要属性的容器,负责绘制的是RenderObject,他们中间是通过ElementTree来联系起来.有了这个基础后,所有的widget都不会提供画布(canvas)来直接绘制image RawImage 这是一个最基础图片容器Widget. Image 这是一个通用包装类,它包装了RawImag

  • Flutter实现容器组件、图片组件 的代码

    •容器组件 容器组件(Container)可以理解为在Android中的RelativeLayout或LinearLayout等,在其中你可以放置你想布局的元素控件,从而形成最终你想要的页面布局.当然Flutter中的容器组件作为一个"容器",肯定会有一些给我们提供一些属性来约束我们容器内的组件,下面介绍一下容器组件(Container)的一些常用属性及描述: 属性名 类型 说明 key Key Container唯一标识符,用于查找更新 alignment AlignmentGeom

随机推荐