Flutter图片与文件选择器使用实例

目录
  • 引言
  • 一、image_picker
    • 1、安装
    • 2、使用
    • 3、属性
    • 4、注意
  • 二、flutter_document_picker
    • 1、安装
    • 2、使用
  • 总结

引言

我已经一个多星期没碰过电脑了，今日上班，打开电脑的第一件事就是想着写点什么。反正大家都还沉浸在节后的喜悦中，还没进入工作状态，与其浪费时间，不如做些更有意义的事情。

今天就跟大家简单分享一下Flutter开发过程中经常会用到的图片和文件选择器。

一、image_picker

一个适用于iOS和Android的Flutter插件，能够从图像库中选取图片、视频，还能够调用相机拍摄新的照片。

该插件由Flutter官方提供，github的Star高达16.7k，算是比较成熟且流行的插件了。

1、安装

flutter pub add image_picker

或者

/// pubspec.yaml文件添加依赖，并在执行flutter pub get命令
dependencies
  image_picker: ^0.8.6+1

2、使用

import 'package:image_picker/image_picker.dart';
/// 图片选取
Future<void> getImage() async {
    final XFile? file = await ImagePicker().pickImage(
      source: ImageSource.gallery, // 图库选择
      maxWidth: 1000.0, // 设置图片最大宽度，间接压缩了图片的体积
    );
    /// 选取图片失败file为null，要注意判断下。
    /// 获取图片路径后可以上传到服务器上
    print('${file?.path}');
}
/// 视频选取
Future<void> getImage() async {
    final XFile? file = await ImagePicker().pickVideo(
      source: ImageSource.camera, // 调用相机拍摄
    );
    print('${file?.path}');
}

在项目中，调用getImage方法就会打开图片选择器。

3、属性

  • source

图片来源，ImageSource.gallery图片库中选择，ImageSource.camera调用相机拍摄新图片。

  • maxWidth

图片的最大宽度，source为ImageSource.camera时有用，等于间接的压缩了图片的体积。如果不设置，以目前手机的相机性能，动不动就拍出了4、5M的照片，对于app来说，图片上传到服务端，将会很慢，建议设置此属性。

4、注意

iOS端如果出现闪退并且控制台报出：

The app's Info.plist must contain an NSPhotoLibraryAddUsageDescription key with a string value explaining to the user how the app uses this data.

那么，需要打开Xcode在Info.plist配置隐私提示语。

二、flutter_document_picker

文档选择器，image_picker只能选择图片和视频，如果要选择PDF，word文档、excel表格等就没办法了。这个时候可以使用flutter_document_picker插件，直接选取手机中的文件。

1、安装

flutter pub add flutter_document_picker

或者

/// pubspec.yaml文件添加依赖，并在执行flutter pub get命令
dependencies
  flutter_document_picker: ^5.1.0

2、使用

import 'package:image_picker/image_picker.dart';
/// 图片选取
Future<void> getDocument() async {
    FlutterDocumentPickerParams? params = FlutterDocumentPickerParams(
        // 允许选取的文件拓展类型，不加此属性则默认支持所有类型
        allowedFileExtensions: ['pdf', 'xls', 'xlsx', 'jpg', 'png', 'jpeg'],
    );
    String? path = await FlutterDocumentPicker.openDocument(
      params: params,
    );
    print('$path');
}

总结

image_picker插件用于图片选取，而flutter_document_picker则用于文件选择，在日常开发中都是很常用的。在iOS中使用要注意隐私权限的配置，不然就会闪退。如果想了解更多的参数属性，可以查看官方文档：

image_picker document

flutter_document_picker document

以上就是Flutter图片与文件选择器使用实例的详细内容，更多关于Flutter图片文件选择器的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Android Flutter图片处理之高斯模糊的实现

    Android Flutter图片处理之高斯模糊的实现

    目录 ImageFilter 横向模糊 垂直模糊 xy轴同时模糊 用法 BackdropFilter ImageFiltered 区别 ImageFilter 在Flutter中,使图片模糊有2种方式,这2种方式都需要配合ImageFilter.blur()使用. factory ImageFilter.blur({ double sigmaX = 0.0, double sigmaY = 0.0, TileMode tileMode = TileMode.clamp }) sigmaX:以x轴

  • Flutter 图片开发核心技能快速掌握教程

    目录 正文 使用网络图片 把网络图片缓存到磁盘 使用 assets 图片 适配浅色与深色模式 在不同的设备使用不同分辨率的图片 关于设备 dpr 不完全匹配的处理 忽略 dpr 信息 使用相册图片 使用相机拍摄的图片 使用内存图片 图片用做装饰 图片预加载 centerSlice centerSlice 只能放大,不能缩小. 全局缓存 ImageCache 的设置 图片类之间的关系 ImageProvider obtainKey(ImageConfiguration) 方法 resolve(Im

  • Flutter加载图片的多样玩法汇总

    目录 加载本地图片 圆角本地图片 效果图 代码 加载网络图片-本地图片占位图 加载网络图片-loading 效果 代码 圆角.边框.渐变 总结 加载本地图片 在项目目录下创建assets文件夹,再在其文件夹下创建images文件夹,后面将需要的图片复制到其中即可 在pubspec.yaml文件中添加引用 flutter: uses-material-design: true assets: - assets/images/ 在Container中加载本地图片 Container( width:

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

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

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

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

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

  • Flutter图片缓存管理ImageCache原理分析

    目录 引言 PaintingBinding 减少图片缓存 增大阀值 思考 引言 设计: 嗯? 这个图片点击跳转进详情再返回图片怎么变白闪一下呢?产品: 是啊是啊! 一定是个bug开发: 囧囧囧 在开发过程中, 也许你也遇到过这样一个场景. 进入一个页面后,前一个页面的图片都会闪白一下. 或者在列表中,加载很多列表项后,之前列表中的图片都需要重新加载.你有没有想过这一切的原因是什么呢? 没错! 它就是我们今天介绍的主人公 --- ImageCache 可能有些人对ImageCache还有些陌生,

  • Flutter图片与文件选择器使用实例

    目录 引言 一.image_picker 1.安装 2.使用 3.属性 4.注意 二.flutter_document_picker 1.安装 2.使用 总结 引言 我已经一个多星期没碰过电脑了,今日上班,打开电脑的第一件事就是想着写点什么.反正大家都还沉浸在节后的喜悦中,还没进入工作状态,与其浪费时间,不如做些更有意义的事情. 今天就跟大家简单分享一下Flutter开发过程中经常会用到的图片和文件选择器. 一.image_picker 一个适用于iOS和Android的Flutter插件,能够

  • Android 文件选择器详解及实例代码

    Android 文件选择器详解及实例代码

    本文给大家讲解下Android文件选择器的使用.实际上就是获取用户在SD卡中选择的文件或文件夹的路径,这很像C#中的OpenFileDialog控件. 此实例的实现过程很简单,这样可以让大家快速的熟悉Android文件选择器,提高开发效率. 网上曾经见到过一个关于文件选择器的实例,很多人都看过,本实例是根据它修改而成的,但更容易理解,效率也更高,另外,本实例有自己的特点:   1.监听了用户按下Back键的事件,使其返回上一层目录.        2.针对不同的文件类型(文件vs文件夹 , 目标

  • python 移动图片到另外一个文件夹的实例

    如下所示: # -*- coding:utf8 -*- import os import shutil import numpy as np import pandas as pd path_img='C:/Users/49691/Desktop/数据集/test' ls = os.listdir(path_img) lenl=len(ls) print(len(ls)) train_labels = pd.read_csv('C:/Users/49691/Desktop/数据集/b.csv')

  • 使用Vue 自定义文件选择器组件的实例代码

    本文 GitHub  https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料.欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西. 文件选择元素是web上最难看的 input 类型之一.它们在每个浏览器中实现的方式不同,而且通常非常难看.这里有一个解决办法,就是把它封装成一个组件. 安装 如果你尚未设置项目,可以使用 vue-cli 的 webpack-simple 模板启动一个新项目. $ npm

  • Struts2+jquery.form.js实现图片与文件上传的方法

    本文实例讲述了Struts2+jquery.form.js实现图片与文件上传的方法.分享给大家供大家参考,具体如下: jquery.form.js是jQuery的一个官方用语支持异步上传文件的插件.官方网站:http://plugins.jquery.com/form/ 结合Struts2三步轻松实现文件上传 一般是针对一个页面可能不止一个Form表单,所以在一个面提交表单会影响到另一个表单,为此,图片上传表单就可以使用无刷新提交方式上传,也就是异步上传,这时jquery.from.js就派上用

  • 使用JQuery实现图片轮播效果的实例(推荐)

    使用JQuery实现图片轮播效果的实例(推荐)

    [效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片 4,设置setInterval,定时执行切换函数 [代码说明] filter(":visible") :获取所有可见的元素 unbind():从匹配的元素中删除绑定的事件 siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元

  • Servlet+Jsp实现图片或文件的上传功能具体思路及代码

    现在不管是博客论坛还是企业办公,都离不开资源的共享.通过文件上传的方式,与大家同分享,从而达到大众间广泛的沟通和交流,我们既可以从中获得更多的知识和经验,也能通过他人的反馈达到自我改进和提升的目的. 下面我就为大家介绍 web项目中的这一上传功能,那么文件是如何从本地发送到服务器的呢?看我慢慢道来: 首先,我们创建一个新的web工程,在工程的WebRoot目录下新建一个upload文件夹,这样当我们将该工程部署到服务器上时,服务器便也生成个upload文件夹,用来存放上传的资源. 然后,在Web

  • Java IO 之文件读写简单实例

    Java IO 之文件读写简单实例 1.文件读 public class ReadFromFile { /** * 以字节为单位读取文件,常用于读二进制文件,如图片.声音.影像等文件. */ public static void readFileByBytes(String fileName) { File file = new File(fileName); InputStream in = null; try { System.out.println("以字节为单位读取文件内容,一次读一个字

  • IOS 简单的本地json格式文件解析的实例详解

    IOS 简单的本地json格式文件解析的实例详解 ljweibo.json文件 { "data":[{ "name" : "孙悟空", "content" : "7月12日的国务院常务会议上,李克强明确要求,要将已审议的<快递条例(草案)>向社会公开征求意见.在会上,总理说了这么一段话:"几年前,快递业刚刚开始发展的时候,有些城市不允许快递存在,理由是影响市容整洁,快递员骑的摩的也不允许停放.但

随机推荐