Flutter：文件读取—— video_player、chewie、image_picker、file_picker

前言

简单学习一下几个比较好用的文件读取库

video_player

简介
用于视频播放

官方文档
https://pub-web.flutter-io.cn/packages/video_player

安装

flutter pub add video_player

加载网络视频

class _MyHomePageState extends State<MyHomePage> {// 控制器late VideoPlayerController _controller;// 初始化@overridevoid initState() {super.initState();// 加载网络视频_controller = VideoPlayerController.networkUrl(Uri.parse('https://www.tujuyun.com/pixabay/video/VideoBig/1024927/4006.mp4'))..initialize().then((_) {setState(() {});});}@overridevoid dispose() {super.dispose();_controller.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: Center(child: _controller.value.isInitialized // 判断是否已经加载完成? AspectRatio(// 设置视频播放的宽高比aspectRatio: _controller.value.aspectRatio,child: VideoPlayer(_controller),): Container(),),floatingActionButton: FloatingActionButton(onPressed: () {setState(() {_controller.value.isPlaying // 判断是否是在播放中? _controller.pause() //暂停: _controller.play(); // 播放});},child: Icon(_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,),),);}
}

在这里插入图片描述
加载本地视频

   _controller = VideoPlayerController.asset('lib/assets/video/3998.mp4')..initialize().then((_) {setState(() {});});

设置倍速和进度条

Center(child: _controller.value.isInitialized // 判断是否已经加载完成? AspectRatio(// 设置视频播放的宽高比aspectRatio: _controller.value.aspectRatio,child: Stack(alignment: Alignment.bottomCenter,children: <Widget>[// 视频播放器VideoPlayer(_controller),// 设置倍速Row(children: [ElevatedButton(onPressed: () {_controller.setPlaybackSpeed(1);},child: const Text("1倍速")),ElevatedButton(onPressed: () {_controller.setPlaybackSpeed(5);},child: const Text("5倍速"))],),// 视频的进度条VideoProgressIndicator(_controller, allowScrubbing: true),],),): Container(),)

在这里插入图片描述

chewie

video_player虽然是官方提供的插件，但是很明显它只适合拿来简单的播放视频，就比如前端的video标签功能也很少。在这里推荐一下chewie

简介

chewie是基于video_player实现的，它额外提供了很多功能，比如：倍速、进度条、全屏以及其他的功能

官方文档
https://pub-web.flutter-io.cn/packages/chewie

安装

flutter pub add chewie

默认的弹出菜单是这样的
在这里插入图片描述

可以通过设置optionsBuilder来进行自定义显示

class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {// 控制器late VideoPlayerController _controller;late ChewieController _chewieController;late PersistentBottomSheetController<dynamic> _bottomSheetController;// 初始化@overridevoid initState() {super.initState();// 加载网络视频_controller = VideoPlayerController.networkUrl(Uri.parse('https://www.tujuyun.com/pixabay/video/VideoBig/1024927/4006.mp4'))..initialize().then((_) {setState(() {});_chewieController = ChewieController(videoPlayerController: _controller,autoPlay: true,looping: true,optionsBuilder: (context, defaultOptions) async {// 这里面现在是只有一个设置倍速的，我们把它拿出来// for (int i = 0; i < defaultOptions.length; i++) {//   print("默认选项：${defaultOptions[i]}");// }// await showDialog<void>(//   context: context,//   builder: (ctx) {//     // return AlertDialog(//     //   content: ListView.builder(//     //     itemCount: defaultOptions.length,//     //     itemBuilder: (_, i) => ActionChip(//     //       label: Text(defaultOptions[i].title),//     //       onPressed: () => defaultOptions[i].onTap!(),//     //     ),//     //   ),//     // );//   },// );_bottomSheetController =Scaffold.of(context).showBottomSheet((BuildContext context) {return SizedBox(height: 200,child: ListView(children: <Widget>[ListTile(leading: const Icon(Icons.speed),title: const Text('倍速'),onTap: () => defaultOptions[0].onTap!(),),const Divider(color: Colors.grey,thickness: 1.0,),ListTile(leading: const Icon(Icons.download),title: const Text('下载'),onTap: () => print("下载中.."),),const Divider(color: Colors.grey,thickness: 1.0,),ListTile(leading: const Icon(Icons.close),title: const Text('关闭'),onTap: () => _bottomSheetController.close(),),],),);});},);});}@overridevoid dispose() {super.dispose();_controller.dispose();_chewieController.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: Center(child: _controller.value.isInitialized // 判断是否已经加载完成? AspectRatio(// 设置视频播放的宽高比aspectRatio: _controller.value.aspectRatio,child: Chewie(controller: _chewieController,),): Container(),),);}
}

在这里插入图片描述

注： chewie 还有很多其他高级功能，比如自定义UI界面、设置弹幕等。需要好好看一下官方文档，才能实现高级功能，不过上面那个例子已经可以满足基本的使用了。

image_picker

简介
用于从相册中挑选图片、视频、使用相机拍摄照片。

官方文档
https://pub-web.flutter-io.cn/packages/image_picker

安装

flutter pub add image_picker

示例：读取单张图片

class _MyHomePageState extends State<MyHomePage> {// 图片文件File? _image;// 错误信息String _error = '';// 图片选择函数Future<void> _pickImage() async {// 从相册中选择图片try {final pickedImage =await ImagePicker().pickImage(source: ImageSource.gallery);if (pickedImage != null) {setState(() {_image = File(pickedImage.path);});}} catch (e) {setState(() {_error = e.toString();});}}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 图片存在则显示if (_image != null)Image.file(_image!,width: 200,height: 200,),// 如果错误信息存在if (_error.isNotEmpty) Text("错误：$_error"),const SizedBox(height: 20,),ElevatedButton(onPressed: _pickImage, child: const Text("从相册里选取图片"))],),),);}
}

在这里插入图片描述
看了一下好像不能设置选择的图片格式，只能设置大小、质量
在这里插入图片描述
如果设置为ImagePicker().pickImage(source: ImageSource.camera) ，这是调用摄像头来进行获取图片

示例：读取多张图片

class _MyHomePageState extends State<MyHomePage> {// 图片文件列表final List<File> _pickedFileList = [];// 错误信息String _error = '';// 图片选择函数Future<void> _pickImage() async {// 从相册中选择图片try {final pickedImageList = await ImagePicker().pickMultiImage();if (pickedImageList.isNotEmpty) {for (XFile image in pickedImageList) {_pickedFileList.add(File(image.path));}setState(() {});}} catch (e) {setState(() {_error = e.toString();});}}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Expanded(child: ListView.builder(itemCount: _pickedFileList.length,itemBuilder: (context, index) {return Image.file(_pickedFileList[index],width: 200,height: 200,);})),// 如果错误信息存在if (_error.isNotEmpty) Text("错误：$_error"),const SizedBox(height: 20,),ElevatedButton(onPressed: _pickImage, child: const Text("从相册里选取图片"))],),),);}
}

要长按图片，才能够一次选择多个，最后在点击右上角的选择。轻触会直接选中图片。另外看了下pickMultiImage里的入参好像不支持限制图片的个数
在这里插入图片描述

示例：选择单个视频

选择视频稍微复杂一点，还需要借助video_player等插件才能更进行预览。

class _MyHomePageState extends State<MyHomePage> {// 错误信息String _error = '';// 视频信息late File _video;// 视频播放器VideoPlayerController? _videoPlayerController;Future<void>? _videoPlayerInitializer;// 选择视频Future<void> _pickVideo() async {// 从相册中选择视频try {final pickedVideo =await ImagePicker().pickVideo(source: ImageSource.gallery);if (pickedVideo != null) {setState(() {_video = File(pickedVideo.path);_videoPlayerController = VideoPlayerController.file(_video);_videoPlayerInitializer = _videoPlayerController!.initialize();// 播放视频_videoPlayerController!.play();});}} catch (e) {setState(() {_error = e.toString();});}}@overridevoid dispose() {_videoPlayerController?.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [if (_videoPlayerController != null)FutureBuilder(future: _videoPlayerInitializer,builder: (BuildContext context, AsyncSnapshot<void> snapshot) {if (snapshot.connectionState == ConnectionState.done) {return SizedBox(width: 300,height: 200,child: AspectRatio(aspectRatio:1.5,child: VideoPlayer(_videoPlayerController!),),);} else {return const CircularProgressIndicator();}},),// 如果错误信息存在if (_error.isNotEmpty) Text("错误：$_error"),const SizedBox(height: 20,),ElevatedButton(onPressed: _pickVideo, child: const Text("从相册里选取视频"))],),),);}
}

在这里插入图片描述

file_picker

简介
一个包，允许您使用本机文件资源管理器来选择单个或多个文件，具有扩展筛选支持。

官方文档
https://pub-web.flutter-io.cn/packages/file_picker

安装

flutter pub add file_picker

示例：选择单个文件

class _MyHomePageState extends State<MyHomePage> {// 错误信息String _error = '';// 文件路径String _filePath = '';// 选择文件Future _pickFile() async {try {FilePickerResult? result = await FilePicker.platform.pickFiles(dialogTitle: "选择图片",type: FileType.image, // 设置文件的类型);if (result != null) {setState(() {_filePath = result.files.single.path!;});}} catch (e) {setState(() {_error = e.toString();});}}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [// File 是 io包下的_filePath == '' ? const Text("未选择文件") : Image.file(File(_filePath)),// 如果错误信息存在if (_error.isNotEmpty) Text("错误：$_error"),const SizedBox(height: 20,),ElevatedButton(onPressed: _pickFile, child: const Text("选择一个图片"))],),),);}
}

在这里插入图片描述

示例：选择多个文件

FilePickerResult? result = await FilePicker.platform.pickFiles(allowMultiple: true);if (result != null) {List<File> files = result.paths.map((path) => File(path)).toList();
} else {// User canceled the picker
}

其他功能略，可以自行查看官方文档

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/81992.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Android 开发者选项日志存储路径

Android 开发者选项日志存储路径

android开发者选项中存在两个item是关于系统日志的。 1.日志记录器缓冲区大小 2.在设备上永久存储日志记录器数据 一个是用来设置缓冲区大小&#xff0c;一个是用来日志存储开关及过滤。 通过分析 system/core/logcat/logcatd.rc mkdir /data/misc/logd 0770 logd log 日志的…
阅读更多...
ArcGIS Pro基础：【划分】工具实现等比例、等面积、等宽度划分图形操作

ArcGIS Pro基础：【划分】工具实现等比例、等面积、等宽度划分图形操作

本次介绍【划分】工具的使用&#xff0c;如下所示&#xff0c;为该工具所处位置。使用该工具可以实现对某个图斑的等比例面积划分、相等面积划分和相等宽度划分。 【等比例面积】&#xff1a;其操作如下所示&#xff0c;其中&#xff1a; 1表示先选中待处理的图斑&#xff0c;2…
阅读更多...
华为智选首款纯电轿跑“LUXEED”能大卖吗？

华为智选首款纯电轿跑“LUXEED”能大卖吗？

监制 | 何玺 排版 | 叶媛 华为智选纯电轿跑来袭&#xff01; 8月7日&#xff0c;华为常务董事余承东在社交媒体上发文&#xff0c;宣布华为智选即将推出首款“突破想象”的纯电轿跑车。 01 华为智选首款纯电轿跑来袭 余承东的发文引起了极大关注&#xff0c;在各大媒体的报…
阅读更多...
动力节点Redis7实战教程，从基础到底层一套通关

动力节点Redis7实战教程，从基础到底层一套通关

Redis是一种非常强大的数据缓存和存储系统&#xff0c;既可以用作关系型数据库的缓存降低查询延迟&#xff0c;也可以作为一个分布式系统的共享数据存储。 动力节点的Redis7课程将带领大家完整的学习Redis7.0版本&#xff0c;内容涵盖Redis全套知识体系&#xff0c;由浅入深 总…
阅读更多...
微信小程序读取本地json

微信小程序读取本地json

首先在项目录下新建【server】文件夹&#xff0c;新建data.js文件&#xff0c;并定义好json数据格式。如下&#xff1a; pages/index/index.ts导入data.js并请求json pages/index/index.wxml页面展示数据
阅读更多...
JavaWeb-能制作中小型网站企业管理系统（适合快速梳理）

JavaWeb-能制作中小型网站企业管理系统（适合快速梳理）

导言 第一章 Web前端开发 一、初始web前端 二、HTML、CSS介绍 三、VsCode安装 四、标签 1 实现标题--排版 2 实现标题--样式 颜色表示 CSS选择器 3 实现标题--超链接 4 实现标签--正文 5 页面布局 盒子模型 布局标签 6 表格、表单标签 表格标签 表单标签 表单项 …
阅读更多...
Positive证书是什么？

Positive证书是什么？

Positive SSL是全球著名CA Sectigo的子品牌&#xff0c; 也是目前全球签发量最高的商业SSL证书。价格低&#xff0c;安全性高&#xff0c;在个人网站和中小型企业网站中拥有极高的占有率。 Positive SSL证书包括DV SSL&#xff0c; EV SSL&#xff0c;也是唯一支持IP地址加密的…
阅读更多...
第十六次CCF计算机软件能力认证

第十六次CCF计算机软件能力认证

第一题&#xff1a;小中大 在数据分析中&#xff0c;最小值最大值以及中位数是常用的统计信息。 老师给了你 n 个整数组成的测量数据&#xff0c;保证有序&#xff08;可能为升序或降序)&#xff0c;可能存在重复的数据。 请统计出这组测量数据中的最大值、中位数以及最小值&am…
阅读更多...
使用HTTP隧道时如何应对目标网站的反爬虫监测？

使用HTTP隧道时如何应对目标网站的反爬虫监测？

在进行网络抓取时&#xff0c;我们常常会遇到目标网站对反爬虫的监测和封禁。为了规避这些风险&#xff0c;使用代理IP成为一种常见的方法。然而&#xff0c;如何应对目标网站的反爬虫监测&#xff0c;既能保证数据的稳定性&#xff0c;又能确保抓取过程的安全性呢&#xff1f;…
阅读更多...
【计算机网络】TCP协议超详细讲解

【计算机网络】TCP协议超详细讲解

文章目录 1. TCP简介2. TCP和UDP的区别3. TCP的报文格式4. 确认应答机制5. 超时重传6. 三次握手7. 为什么两次握手不行?8. 四次挥手9. 滑动窗口10. 流量控制11. 拥塞控制12. 延时应答13. 捎带应答14. 面向字节流15. TCP的连接异常处理 1. TCP简介 TCP协议广泛应用于可靠性要求…
阅读更多...
Fortinet安全专家问答实录｜如何防护暴力破解、撞库攻击

Fortinet安全专家问答实录｜如何防护暴力破解、撞库攻击

黑客攻防&#xff0c;一个看似神秘&#xff0c;但却必不可缺的领域。近期&#xff0c;全球网络与安全融合领域领导者Fortinet&#xff08;Nasdaq&#xff1a;FTNT&#xff09;&#xff0c;开启了Fortinet DEMO DAY系列实战攻防演练线上直播&#xff0c;让人人都能零距离观摩黑客…
阅读更多...
关于ETL的两种架构（ETL架构和ELT架构） qt

关于ETL的两种架构（ETL架构和ELT架构） qt

&#xfeff;ETL&#xff0c;是英文 Extract-Transform-Load 的缩写&#xff0c;用来描述将数据从来源端经过抽取&#xff08;extract&#xff09;、转换&#xff08;transform&#xff09;、加载&#xff08;load&#xff09;至目的端的过程。ETL一词较常用在数据仓库&#xf…
阅读更多...
【flink】使用flink-web-ui提交作业报错

【flink】使用flink-web-ui提交作业报错

使用WebUI提交作业出现错误。 错误截图&#xff1a; 弹框信息&#xff1a; Server Response Message: org.apache.flink.runtime.rest.handler.RestHandlerException: Could not execute application.at org.apache.flink.runtime.webmonitor.handlers.JarRunHandler.lambda$h…
阅读更多...
数据链路层概述

数据链路层概述

数据传输过程如下&#xff1a; 数据包按上述过程传输&#xff0c;详见&#xff08;计算机网络概述三&#xff09;。在分析数据链路层时可以假象成其沿着水平传播。 这三段链路层的传播方式可能会有所不同。 基本概念&#xff1a; 链路&#xff1a;指一个节点到相邻节点的一段物…
阅读更多...
用于视觉跟踪的在线特征选择研究（Matlab代码实现）

用于视觉跟踪的在线特征选择研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
HBase-组成

HBase-组成

client 读写请求HMaster 管理元数据监控region是否需要进行负载均衡&#xff0c;故障转移和region的拆分RegionServer 负责数据cell的处理&#xff0c;例如写入数据put&#xff0c;查询数据get等 拆分合并Region的实际执行者&#xff0c;由Master监控&#xff0c;由regionServ…
阅读更多...
C#实现旋转图片验证码

C#实现旋转图片验证码

开发环境&#xff1a;C#&#xff0c;VS2019&#xff0c;.NET Core 3.1&#xff0c;ASP.NET Core 1、建立一个验证码控制器 新建两个方法Create和Check&#xff0c;Create用于创建验证码&#xff08;返回1张图片和令牌&#xff09;&#xff0c;Check用于验证&#xff08;验证图…
阅读更多...
Qt应用开发(基础篇)——LCD数值类 QLCDNumber

Qt应用开发(基础篇)——LCD数值类 QLCDNumber

一、前言 QLCDNumber类继承于QFrame&#xff0c;QFrame继承于QWidget&#xff0c;是Qt的一个基础小部件。 QLCDNumber用来显示一个带有类似lcd数字的数字&#xff0c;适用于信号灯、跑步机、体温计、时钟、电表、水表、血压计等仪器类产品的数值显示。 QLCDNumber可以显示十进制…
阅读更多...
【RabbitMQ】golang客户端教程3——发布订阅(使用fanout交换器)

【RabbitMQ】golang客户端教程3——发布订阅(使用fanout交换器)

发布订阅 在上一个教程中&#xff0c;我们创建了一个工作队列。工作队列背后的假设是每个任务只传递给一个工人。在这一部分中&#xff0c;我们将做一些完全不同的事情——我们将向多个消费者传递一个消息。这就是所谓的“订阅/发布模式”。 为了说明这种模式&#xff0c;我们…
阅读更多...
cloudstack management高可用

cloudstack management高可用

一、环境说明 CPU&#xff1a; kunpeng 920 操作系统&#xff1a;OpenEuler 22.03 IP角色192.168.157.20mysql192.168.157.21management-server 1192.168.157.22management-server 2192.168.157.30nginx 二、部署 基础环境准备参考【cloudstack测试环境搭建】 1、部署mysql&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023