flutter学习之权限申请相关，选择本地图片，视频，拍照

2024-07-18 08:23| 来源: 网络整理| 查看: 265

在flutter中权限申请和拍照视频都是依赖一些库实现。相关的库如下：

# 获取设备信息 device_info_plus: ^2.1.0 #动态权限申请 permission_handler: ^8.1.4+2 #选择相册 image_picker: ^0.8.3+2 # 视频播放 video_player: ^2.1.12 chewie: ^1.2.2

可以自己在https://pub.flutter-io.cn/上面搜索该库，查看使用方法

文章目录 flutter学习之权限申请相关，选择本地图片，视频，拍照一、获取设备信息二、动态权限申请三、拍照和相册四、视频播放1.加载网络视频2.加载本地视频总结

一、获取设备信息

device_info_plus是一个获取设备信息的库，支持Android iOS MacOS Web Linux Windows这几个平台，是Flutter 团队开发的。

import 'package:device_info_plus/device_info_plus.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_view_demo/res/ShowToast.dart'; import 'package:fluttertoast/fluttertoast.dart'; class TesttwentYThree extends StatefulWidget { const TesttwentYThree({Key? key}) : super(key: key); @override _TesttwentYThreeState createState() => _TesttwentYThreeState(); } class _TesttwentYThreeState extends State { late AndroidDeviceInfo androidInfo; @override void initState() { super.initState(); _getDevice(); } _getDevice() async{ DeviceInfoPlugin deviceInfo = DeviceInfoPlugin(); androidInfo = await deviceInfo.androidInfo; print('Running on ${androidInfo.model}'); // e.g. "Moto G (4)" } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("获取设备信息"),), body: ListView( children: [ ListTile( title: Text("version"), onTap: (){ showToast("${androidInfo.version}"); }, ), ListTile( title: Text("board"), onTap: (){ showToast("${androidInfo.board}"); }, ), ListTile( title: Text("bootloader"), onTap: (){ showToast("${androidInfo.bootloader}"); }, ), ListTile( title: Text("brand"), onTap: (){ showToast("${androidInfo.brand}"); }, ), ListTile( title: Text("device"), onTap: (){ showToast("${androidInfo.device}"); }, ), ListTile( title: Text("fingerprint"), onTap: (){ showToast("${androidInfo.fingerprint}"); }, ), ListTile( title: Text("display"), onTap: (){ showToast("${androidInfo.display}"); }, ), ListTile( title: Text("hardware"), onTap: (){ showToast("${androidInfo.hardware}"); }, ), ListTile( title: Text("host"), onTap: (){ showToast("${androidInfo.host}"); }, ), ListTile( title: Text("id"), onTap: (){ showToast("${androidInfo.id}"); }, ),ListTile( title: Text("manufacturer"), onTap: (){ showToast("${androidInfo.manufacturer}"); }, ),ListTile( title: Text("model"), onTap: (){ showToast("${androidInfo.model}"); }, ),ListTile( title: Text("product"), onTap: (){ showToast("${androidInfo.product}"); }, ),ListTile( title: Text("tags"), onTap: (){ showToast("${androidInfo.tags}"); }, ),ListTile( title: Text("type"), onTap: (){ showToast("${androidInfo.type}"); }, ),ListTile( title: Text("isPhysicalDevice"), onTap: (){ showToast("${androidInfo.isPhysicalDevice}"); }, ),ListTile( title: Text("androidId"), onTap: (){ showToast("${androidInfo.androidId}"); }, ), ], ), ); } } 二、动态权限申请

三方库地址：https://pub.flutter-io.cn/packages/permission_handler

用之前Android和IOS都需要在对应工程下做相关配置： Android: 1.将以下内容添加到您的“gradle.properties”文件中：

android.useAndroidX=true android.enableJetifier=true

2.确保compileSdkVersion将“android/app/build.gradle”文件中的设置为 30：在app下build.gradle文件里

android { compileSdkVersion 30 ... }

IOS：请查看官方文档

批量申请权限：

/** * 批量申请权限 */ void requestAllPermission() async{ if (await Permission.contacts.request().isGranted) { // Either the permission was already granted before or the user just granted it. } // You can request multiple permissions at once. Map statuses = await [ Permission.location, Permission.storage, Permission.camera, ].request(); print(statuses[Permission.location]); }

运行是单个权限申请

Future requestCalendarPermission() async { //获取当前的权限 var status = await Permission.phone.status; if (status == PermissionStatus.granted) { //已经授权 return true; } else { //未授权则发起一次申请 status = await Permission.phone.request(); if (status == PermissionStatus.granted) { return true; } else { return false; } } } }

整体代码查看：

import 'package:flutter_view_demo/res/ShowToast.dart'; import 'package:permission_handler/permission_handler.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class TesttwentYFour extends StatefulWidget { const TesttwentYFour({Key? key}) : super(key: key); @override _TesttwentYFourState createState() => _TesttwentYFourState(); } class _TesttwentYFourState extends State { @override void initState() { super.initState(); // 批量申请权限 requestAllPermission(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("权限申请"), ), body: ListView( children: [ ListTile( title: Text("动态申请定位权限"), onTap: (){ requestPermission(0); }, ), ListTile( title: Text("动态申请相机权限"), onTap: (){ requestPermission(1); }, ), ListTile( title: Text("动态申请存储权限"), onTap: (){ requestPermission(2); }, ), ListTile( title: Text("动态申请设备信息权限"), onTap: (){ requestPermission(3); }, ), ], ), ); } /** * 批量申请权限 */ void requestAllPermission() async{ if (await Permission.contacts.request().isGranted) { // Either the permission was already granted before or the user just granted it. } // You can request multiple permissions at once. Map statuses = await [ Permission.location, Permission.storage, Permission.camera, ].request(); print(statuses[Permission.location]); } void requestPermission(int type) async { // 申请权限 late bool hasLocationPermission; if(type ==0){ hasLocationPermission = await requestLocationPermission(); }else if(type ==1){ hasLocationPermission = await requestCameraPermission(); }else if(type ==2){ hasLocationPermission = await requestWritePermission(); }else if(type ==3){ hasLocationPermission = await requestCalendarPermission(); } if (hasLocationPermission) { showToast("权限申请通过"); } else { showToast("权限申请不通过"); } } // 申请定位权限 // 授予定位权限返回 true，否则返回 false Future requestLocationPermission() async { //获取当前的权限 var status = await Permission.location.status; if (status == PermissionStatus.granted) { //已经授权 return true; } else { //未授权则发起一次申请 status = await Permission.location.request(); if (status == PermissionStatus.granted) { return true; } else { return false; } } } Future requestCameraPermission() async { //获取当前的权限 var status = await Permission.camera.status; if (status == PermissionStatus.granted) { //已经授权 return true; } else { //未授权则发起一次申请 status = await Permission.camera.request(); if (status == PermissionStatus.granted) { return true; } else { return false; } } } Future requestWritePermission() async { //获取当前的权限 var status = await Permission.storage.status; if (status == PermissionStatus.granted) { //已经授权 return true; } else { //未授权则发起一次申请 status = await Permission.storage.request(); if (status == PermissionStatus.granted) { return true; } else { return false; } } } Future requestCalendarPermission() async { //获取当前的权限 var status = await Permission.phone.status; if (status == PermissionStatus.granted) { //已经授权 return true; } else { //未授权则发起一次申请 status = await Permission.phone.request(); if (status == PermissionStatus.granted) { return true; } else { return false; } } } } 三、拍照和相册

Image Picker plugin for Flutter是Flutter官方提供的一个图片选择库，里面自带动态权限申请，不需要自己再去申请权限了。主要适用于Android和IOS端，相关方法：

import 'package:image_picker/image_picker.dart'; ... final ImagePicker _picker = ImagePicker(); // Pick an image 拍照 final XFile? image = await _picker.pickImage(source: ImageSource.gallery); // Capture a photo 选择一张图片 final XFile? photo = await _picker.pickImage(source: ImageSource.camera); // Pick a video 录制视频 final XFile? image = await _picker.pickVideo(source: ImageSource.gallery); // Capture a video 选择一个视频 final XFile? photo = await _picker.pickVideo(source: ImageSource.camera); // Pick multiple images 批量选择图片 final List? images = await _picker.pickMultiImage(); ...

具体实现：

import 'dart:io'; import 'package:image_picker/image_picker.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class TesttwentYFive extends StatefulWidget { const TesttwentYFive({Key? key}) : super(key: key); @override _TesttwentYFiveState createState() => _TesttwentYFiveState(); } class _TesttwentYFiveState extends State { final ImagePicker _picker = ImagePicker(); XFile? _photo; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("相册，拍照"),), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ this._photo == null?Text("请选择图片"):Image.file(File(_photo!.path)), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton(onPressed: (){ // requestPermission(0); _takePhoto(); }, child: Text("拍照")), SizedBox(width: 10,), ElevatedButton(onPressed: (){ // requestPermission(0); _galleryPhoto(); }, child: Text("相册")), SizedBox(width: 10,), ElevatedButton(onPressed: (){ // requestPermission(0); _choicePhoto(); }, child: Text("相册多选")), ], ) ], ), ), ); } _takePhoto() async{ XFile? photo = await _picker.pickImage(source: ImageSource.camera,maxWidth: 400,maxHeight: 400); if(photo != null){ setState(() { this._photo = photo; }); } } _galleryPhoto() async{ XFile? photo = await _picker.pickImage(source: ImageSource.gallery,maxWidth: 400,maxHeight: 400); if(photo != null){ setState(() { this._photo = photo; }); } } _choicePhoto() async{ // Pick multiple images final List? images = await _picker.pickMultiImage(); } } 四、视频播放

video_player是flutter官方提供的一个视频播放库，支持ANDROID IOS WEB，但是只有播放功能，所以的需求功能都需要扩展，所以需要搭配其他的库一起使用。 chewie是一个video_player的播放扩展库。三方库地址： video_player：https://pub.flutter-io.cn/packages/video_player/install chewie：https://pub.flutter-io.cn/packages/chewie

1.加载网络视频 class NetVideoPlayer extends StatefulWidget { const NetVideoPlayer({Key? key}) : super(key: key); @override _NetVideoPlayerState createState() => _NetVideoPlayerState(); } class _NetVideoPlayerState extends State { late VideoPlayerController videoPlayerController; late ChewieController chewieController; @override initState() { super.initState(); _initVideo(); } //初始化播放状态 _initVideo() async { videoPlayerController = VideoPlayerController.network( 'https://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4'); // await videoPlayerController.initialize(); chewieController = ChewieController( videoPlayerController: videoPlayerController, autoPlay: true, looping: true, ); } @override void dispose() { //页面关闭的时候销毁 videoPlayerController.dispose(); chewieController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("网络视频播放"), ), body: Center( child: Chewie( controller: chewieController, ), ), ); } } 2.加载本地视频

获取本地视频。获取成功跳转播放视频页

final ImagePicker _picker = ImagePicker(); _getVideo() async{ final XFile? image = await _picker.pickVideo(source: ImageSource.gallery); if(image != null){ String videoPath = image.path; Navigator.pushNamed(context, "/LocationVideoPlay",arguments: { "videoPath":videoPath }); } } class LocationVideoPlay extends StatefulWidget { var arguments; LocationVideoPlay({Key? key,this.arguments}) : super(key: key); @override _LocationVideoPlayState createState() => _LocationVideoPlayState(this.arguments); } class _LocationVideoPlayState extends State { var arguments; _LocationVideoPlayState(this.arguments); late VideoPlayerController videoPlayerController; late ChewieController chewieController; @override initState() { super.initState(); _initVideo(); } //初始化播放状态 _initVideo() async { videoPlayerController = VideoPlayerController.file(File(arguments["videoPath"])); // await videoPlayerController.initialize(); chewieController = ChewieController( videoPlayerController: videoPlayerController, autoPlay: true, looping: true, ); } @override void dispose() { //页面关闭的时候销毁 videoPlayerController.dispose(); chewieController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("本地视频播放"),), body: Center( child: Chewie( controller: chewieController, ), ), ); } } 总结

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章