文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-01-30 15:00

关注

引言

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

今天就跟大家简单分享一下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方法就会打开图片选择器。

image.png

image.png

3、属性

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

图片的最大宽度,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配置隐私提示语。

image.png

二、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.png

总结

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

image_picker document

flutter_document_picker document

以上就是Flutter图片与文件选择器使用实例的详细内容,更多关于Flutter图片文件选择器的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯