您的位置：首页 > 编程技术 > android  >  Flutter简洁实用的图片编辑器的实现

Flutter简洁实用的图片编辑器的实现

 更新时间：2022年2月10日 21:03  点击：440 作者：静水流深zz

介绍

一款简洁实用的图片编辑器，纯dart开发。支持：涂鸦、旋转&翻转、马赛克、添加文字，及自定义ui风格。

功能演示

涂鸦

draw.gif

旋转&翻转

flip&rotate.gif

马赛克

mosaic.gif

添加文字及删除

text_delete.gif

addtext_done.gif

安装

添加依赖

dependencies:
  image_editor_dove: ^latest

import

import 'package:image_editor/flutter_image_editor.dart';

使用方法

获取到原图片后，将其传给ImageEditor 如下：

  Future<void> toImageEditor(File origin) async {
    return Navigator.push(context, MaterialPageRoute(builder: (context) {
      return ImageEditor(
        originImage: origin,
        //可空，支持自定义存储位置(编辑后的图片)
        savePath: customDirectory
      );
    })).then((result) {
      if (result is EditorImageResult) {
        setState(() {
          _image = result.newFile;
        });
      }
    }).catchError((er) {
      debugPrint(er);
    });
  }

返回结果

///The editor's result.
class EditorImageResult {
  ///宽度
  final int imgWidth;

  ///高度
  final int imgHeight;

  ///编辑后的图片
  final File newFile;

  EditorImageResult(this.imgWidth, this.imgHeight, this.newFile);
}

拓展

UI定制

一些按钮、滑块等widget支持自定义,可通过继承ImageEditorDelegate来自定义ui风格：

class YourUiDelegate extends ImageEditorDelegate{
    ...
}

ImageEditor.uiDelegate = YourUiDelegate();



class ImageEditor extends StatefulWidget {

  const ImageEditor({Key? key, required this.originImage, this.savePath}) : super(key: key);
   
   ...
    
  ///[uiDelegate] is determine the editor's ui style.
  ///You can extends [ImageEditorDelegate] and custome it by youself.
  static ImageEditorDelegate uiDelegate = DefaultImageEditorDelegate();

  @override
  State<StatefulWidget> createState() {
    return ImageEditorState();
  }
}

保持相对绘制路径

为了获得更大的绘制区域，所以绘制面积并非为图片显示区域，这也就导致了旋转的时候，相对位置会有变化。如果你需要保持相对，可以控制绘制区域与图片显示区域保持一致即可。

参考及其他文章

地址

github仓库地址: image_editor_dove

插件地址：image_editor_dove

参考插件

signature | Flutter Package (flutter-io.cn)

到此这篇关于Flutter简洁实用的图片编辑器的实现的文章就介绍到这了,更多相关Flutter 图片编辑器内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

原文出处：https://blog.csdn.net/ljq5945/article/details/122847252

[!--infotagslink--]

相关文章

  • Flutter悬浮按钮FloatingActionButton使用详解

    本文主要介绍了Flutter悬浮按钮FloatingActionButton使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-07-12

  • Flutter 开发一个登录页面

    登录页面在 App 开发中非常常见，本篇借登录页面的开发介绍了文本框 TextField组件的使用，同时使用文本框的装饰属性实现了个性化文本框设置。...2021-06-05

  • Flutter 底部弹窗ModelBottomSheet的使用示例

    在实际开发过程中，经常会用到底部弹窗来进行快捷操作，例如选择一个选项，选择下一步操作等等。在 Flutter 中提供了一个 showModelBottomSheet 方法用于弹出底部弹窗，本篇介绍如何使用底部弹窗。...2021-06-07

  • Flutter 如何封装文本输入框组件

    在实际开发过程中，往往开始是完成功能层面的开发，然而再考虑组件封装和代码优化。当然，组件封装越早做越好，因为这样会提高整个团队开发的规范性和效率。本文将介绍如何封装一个文本输入框组件...2021-06-05

  • Flutter项目在 iOS14 启动崩溃的解决方法

    这篇文章主要介绍了Flutter项目在 iOS14 启动崩溃的解决方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-09-24

  • flutter实现点击事件

    这篇文章主要介绍了flutter实现点击事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-26

  • flutter的环境安装配置问题及解决方法

    Flutter是Google推出的基于Dart语言开发的跨平台开源UI框架，旨在统一纷纷扰扰的跨平台开发框架，在UI层面上多端共用一套Dart代码来实现多平台适配开发，这篇文章主要介绍了flutter的环境安装配置问题,需要的朋友可以参考下...2020-06-09

  • 详解Flutter 调用 Android Native 的方法

    这篇文章主要介绍了详解Flutter 调用 Android Native 的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-01-25

  • Flutter开发中的路由参数处理

    在实际开发中，我们经常会需要在页面跳转的时候携带路由参数，典型的例子就是从列表到详情页的时候，需要携带详情的 id，以便详情页获取对应的数据。同时，有些时候还需要返回时携带参数返回上一级，以便上级页面根据返回结果更新。本篇将介绍这两种情形的实现。...2021-06-18

  • 用Flutter做桌上弹球(绘图（Canvas&CustomPaint）API)

    这篇文章主要介绍了用Flutter做桌上弹球 聊聊绘图（Canvas&CustomPaint）API,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-07-31

  • Flutter Android应用启动白屏的解决方案

    任何一个app基本都会设计一个启动页,今天我们就来看看怎么在flutter项目中设置启动页,这篇文章主要给大家介绍了关于Flutter Android应用启动白屏解决的相关资料,需要的朋友可以参考下...2021-11-11

  • Flutter实现局部刷新

    这篇文章主要为大家详细介绍了Flutter实现局部刷新，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-07-14

  • Flutter路由fluro引入配置和使用的具体方法

    Flutter本身提供了路由机制，本文主要介绍了Flutter fluro配置使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-08

  • Canonical通过Flutter启用Linux桌面应用程序(推荐)

    这篇文章主要介绍了Canonical通过Flutter启用Linux桌面应用程序,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-07-10

  • 如何在Flutter中嵌套Android布局

    通常Flutter与Android页面交互是各自独占整个手机屏幕，但有些情况下无法满足需求，有些时候Flutter中没有提供相关插件或者插件不满足需求，这时候就需要开发者自定义插件，开发者可以参考本文中的方法去进行自定义。...2021-06-07

  • Flutter中如何使用WillPopScope的示例代码

    这篇文章主要介绍了Flutter中如何使用WillPopScope,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-05-14

  • Flutter深色模式适配的实现

    这篇文章主要介绍了Flutter深色模式适配的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-04

  • Android如何在原生App中嵌入Flutter

    这篇文章主要介绍了Android如何在原生App中嵌入Flutter，帮助大家更好的理解和学习Android开发，感兴趣的朋友可以了解下...2021-03-13

  • Flutter软键盘的原理浅析

    大家应该都知道目前Flutter官方是没有自定义键盘的解决方案,下面这篇文章主要给大家介绍了关于Flutter软键盘原理的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-10-08

  • Flutter仿钉钉考勤日历的示例代码

    这篇文章主要介绍了Flutter仿钉钉考勤日历的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-23