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.mzph.cn/news/29414.shtml

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

相关文章

centos8.5本地yum源报错

centos8.5本地yum源报错

在下载文件出现以下错误 [rootserver ~]# yum install gcc Updating Subscription Management repositories. Unable to read consumer identity This system is not registered with an entitlement server. You can use subscription-manager to register. RHEL8.5-BaseOS …
阅读更多...
rust实践-异步并发socket通信

rust实践-异步并发socket通信

客户端 [package] name "rust_client" version "0.1.0" edition "2021"[dependencies] tokio { version "1.14.0", features ["full"] }use tokio::io::{self, AsyncReadExt, AsyncWriteExt}; use tokio::net::TcpSt…
阅读更多...
典型移动APP安全风险提醒

典型移动APP安全风险提醒

研究背景 随着互联网和移动设备的发展&#xff0c;手机已成为人人都拥有的设备&#xff0c;各式各样的App更是丰富了人们的生活&#xff1a;从社交到出行、从网购到外卖&#xff0c;从办公到娱乐等&#xff0c;App已成为大众生活必需品。然而&#xff0c;App的流行使人们对App…
阅读更多...
rust基础

rust基础

这是笔者学习rust的学习笔记&#xff08;如有谬误&#xff0c;请君轻喷&#xff09; 参考视频&#xff1a; https://www.bilibili.com/video/BV1hp4y1k7SV参考书籍&#xff1a;rust程序设计语言&#xff1a;https://rust.bootcss.com/title-page.htmlmarkdown地址&#xff1a;h…
阅读更多...
Blazor前后端框架Known-V1.2.11

Blazor前后端框架Known-V1.2.11

V1.2.11 Known是基于C#和Blazor开发的前后端分离快速开发框架&#xff0c;开箱即用&#xff0c;跨平台&#xff0c;一处代码&#xff0c;多处运行。 Gitee&#xff1a; https://gitee.com/known/KnownGithub&#xff1a;https://github.com/known/Known 概述 基于C#和Blazo…
阅读更多...
跨境电商中的安全挑战与隐擎Fox指纹浏览器的应用

跨境电商中的安全挑战与隐擎Fox指纹浏览器的应用

随着全球互联网的蓬勃发展&#xff0c;跨境电商已经成为了国际贸易的重要组成部分。然而&#xff0c;跨境电商的迅速崛起也伴随着一系列安全挑战&#xff0c;其中之一就是恶意活动和隐私泄露。为了应对这些挑战&#xff0c;诸多技术手段被开发出来&#xff0c;其中隐擎Fox指纹浏…
阅读更多...
@RequestBody注解，自定义注解

@RequestBody注解，自定义注解

public Result update(RequestBody EmployeeDTO employeeDTO){&#xff0c;为什么要加RequestBody &#xff0c;什么时候加什么时候不加&#xff1f; 在这段代码中&#xff0c;RequestBody EmployeeDTO employeeDTO 表示将请求体中的数据解析为 EmployeeDTO 对象&#xff0c;并…
阅读更多...
springboot启动忽略某些类

springboot启动忽略某些类

springboot启动忽略某些类 描述解决方案单拉一个提交&#xff0c;把所有的涉及kafka消费的都不注入容器通过配置ComponentScan的excludeFilters配置了不生效后续处理改之前改之后解释 总结 拆分环境 感触解决实现demo参考 描述 目前我这的开发环境和测试环境数据库是两份&#…
阅读更多...
opencv基础-33 图像平滑处理-中值滤波cv2.medianBlur()

opencv基础-33 图像平滑处理-中值滤波cv2.medianBlur()

中值滤波是一种常见的图像处理滤波技术&#xff0c;用于去除图像中的噪声。它的原理是用一个滑动窗口&#xff08;也称为卷积核&#xff09;在图像上移动&#xff0c;对窗口中的像素值进行排序&#xff0c;然后用窗口中像素值的中值来替换中心像素的值。这样&#xff0c;中值滤…
阅读更多...
【算法|数组】双指针

【算法|数组】双指针

算法|数组——双指针 引入 给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求也按 非递减顺序 排序。 示例 1&#xff1a; 输入&#xff1a;nums [-4,-1,0,3,10] 输出&#xff1a;[0,1,9,16,100] 解释&#xff1a;…
阅读更多...
docker安装kafka

docker安装kafka

docker安装kafka 1.首先&#xff0c;下载Kafka和Zookeeper的Docker镜像&#xff0c; docker pull wurstmeister/kafka docker pull wurstmeister/zookeeper2.启动Zookeeper容器&#xff1a; docker run -d --name zookeeper -p 2181:2181 -t wurstmeister/zookeeper3.启动Ka…
阅读更多...
gitee linux免密/SSH 方式连接免登录

gitee linux免密/SSH 方式连接免登录

目录 生成SSH公钥通过 ssh-keygen 程序创建找到SSH公钥 在gitee中添加公钥 生成SSH公钥 通过 ssh-keygen 程序创建 shell> ssh-keygen -t rsa -C "xxxxxx.com" Generating public/private rsa key pair. Enter file in which to save the key (/root/.ssh/id_rs…
阅读更多...
JVM详情

JVM详情

JVM详情 一、JVM内存划分二、双亲委派模型&#xff08;重点考察&#xff09;三、 GC&#xff08;垃圾回收机制&#xff09;垃圾的判定算法垃圾回收算法 一、JVM内存划分 堆&#xff1a;存放new出来的对象&#xff1b;&#xff08;成员变量&#xff09; 方法区&#xff1a;存放…
阅读更多...
flutter：二维码生成与读取

flutter：二维码生成与读取

前言 这csdn真的是服了&#xff0c;图片里有个二维码就直接变成违规图片了。至于效果的话&#xff0c;自己运行一下看看吧。 生成 flutter中生成二维码可以使用 qr_flutter。 官方文档 https://pub-web.flutter-io.cn/packages/qr_flutter 安装 flutter pub add qr_flutt…
阅读更多...
Visual Studio Code中对打开的脚本格式统一

Visual Studio Code中对打开的脚本格式统一

什么是Language Server Protocol (LSP)? Language Server Protocol&#xff08;语言服务器协议&#xff0c;简称LSP&#xff09;是微软在2016年提出的一套统一的通讯协议方案。LSP定义了一套编辑器或者IDE与语言服务器&#xff08;Language Server&#xff09;之间使用的协议&…
阅读更多...
网络基本概念

网络基本概念

目录 一、IP地址 1. 概念 2. 格式 3. 特殊IP 二、端口号 1.概念 2. 格式 3.注意事项 三、 协议 1. 概念 2. 作用 四、协议分层 1. 网络设备所在分层 五、封装与分用 六、客户端和服务器 1. 客户端与服务器通信的过程 一、IP地址 1. 概念 IP地址主要用于标识网络主机.其他网络…
阅读更多...
基于关系有向图的知识推理2022ACM 8.9

基于关系有向图的知识推理2022ACM 8.9

基于关系有向图的知识推理 摘要介绍相关工作基于路径的方法基于GNN的方法 关系有向图RED-GCN实验 摘要 知识图推理旨在从已有的知识中推断出新的事实。基于关系路径的方法在文献中显示出较强的可解释性和归纳推理能力。然而&#xff0c;在KG中 捕获复杂拓扑(Capturing complex…
阅读更多...
动手学深度学习Pytorch 4.4练习

动手学深度学习Pytorch 4.4练习

1.这个多项式回归问题可以准确地解出吗&#xff1f;提⽰&#xff1a;使⽤线性代数。 可以,把多项式问题&#xff0c;用matlab的str2sym表示出来&#xff0c;再用solve求解。 2.考虑多项式的模型选择。 1. 绘制训练损失与模型复杂度&#xff08;多项式的阶数&#xff09;的关系…
阅读更多...
Java 判断一个字符串在另一个字符串中出现的次数

Java 判断一个字符串在另一个字符串中出现的次数

1.split实现 package com.jiayou.peis.official.account.biz.utils;public class Test {public static void main(String[] args) {String k"0110110100100010101111100101011001101110111111000101101001100010101" "011101100101011010100011111010111001001…
阅读更多...
Redis | 哨兵模式

Redis | 哨兵模式

Redis | 哨兵模式 1. 简介 Redis Sentinel&#xff08;哨兵&#xff09;是Redis提供的一种高可用性解决方案。它是一个独立的进程&#xff0c;用于监控和管理Redis主从模式的节点&#xff0c;并在主节点故障时自动进行故障转移。哨兵模式可以确保Redis集群的高可用性和数据一…
阅读更多...
最新文章

Copyright @ 2022~2023