当前位置: 首页 > article >正文

Flutter_学习记录_ ImagePicker拍照、录制视频、相册选择照片和视频、上传文件

插件地址:https://pub.dev/packages/image_picker

  1. 添加插件
    在这里插入图片描述
  2. 添加配置

android无需配置开箱即用,ios还需要配置info.plist

<key>NSPhotoLibraryUsageDescription</key> 
	<string>应用需要访问相册读取文件</string> 
<key>NSCameraUsageDescription</key> 
	<string>应用需要访问相机拍照</string> 
<key>NSMicrophoneUsageDescription</key> 
	<string>应用需要访问麦克风录制视频</string>
  1. 核心代码
import 'package:image_picker/image_picker.dart';


final ImagePicker picker = ImagePicker();
// 从相册选择相机
final XFile? image = await picker.pickImage(source: ImageSource.gallery);
// 拍照
final XFile? photo = await picker.pickImage(source: ImageSource.camera);
// 从相册选择视频
final XFile? galleryVideo =
    await picker.pickVideo(source: ImageSource.gallery);
// 录制视频
final XFile? cameraVideo = await picker.pickVideo(source: ImageSource.camera);
  1. 完整代码
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
// 本地视频播放的逻辑
import 'package:video_player/video_player.dart';
import 'package:chewie/chewie.dart';

class ImagePickerDemo extends StatefulWidget {
  const ImagePickerDemo({super.key});

  
  State<ImagePickerDemo> createState() => _ImagePickerDemoState();
}

class _ImagePickerDemoState extends State<ImagePickerDemo> {

  final ImagePicker _imagePicker  = ImagePicker();
  XFile? _pickerImage;
  XFile? _pickerVideo;

  // 配置加载本地视频
  late VideoPlayerController _videoPlayerController;
  late ChewieController _chewieController;

  // 拍照
  void _imagePickerCamera() async {
    final XFile? image = await _imagePicker.pickImage(
      source: ImageSource.camera,
      // 可以不设置,设置上可以避免数据太大
      maxHeight: 800,
      maxWidth: 800
    );
    if (image != null) {
      print(image.path);
      setState(() {
        _pickerVideo = null;
        _pickerImage = image;
      });
    }
  }

  // 相册选择图片
  void _imagePickerGallery() async {
    final XFile? image = await _imagePicker.pickImage(
      source: ImageSource.gallery,
      // 可以不设置,设置上可以避免数据太大
      maxHeight: 800,
      maxWidth: 800
    );
    if (image != null) {
      print(image.path);
      setState(() {
        _pickerVideo = null;
        _pickerImage = image;
      });
    } 
  }

  // 视频-选择相机录制
  void _videoPickerCamera() async {
    final XFile? video = await _imagePicker.pickVideo(source: ImageSource.camera);
    if (video != null) {
      print(video.path);
      await _initVideo(File(video.path));
      setState(() {
        _pickerImage = null;
        _pickerVideo = video;
      });
    }
  }

  // 视频-选择相册
  void _videoPickerGallery() async {
    final XFile? video = await _imagePicker.pickVideo(source: ImageSource.gallery);
    if (video != null) {
      print(video.path);
      await _initVideo(File(video.path));
      setState(() {
        _pickerImage = null;
        _pickerVideo = video;
      });
    }
  }

  // 显示图片或者显示视频
  Widget _showImageOrVideoWidget() {
    if (_pickerImage != null) {
      return Image.file(File(_pickerImage!.path));
    } else if (_pickerVideo != null) {
      return AspectRatio(
        aspectRatio: _videoPlayerController.value.aspectRatio,
        child: Chewie(controller: _chewieController)
      );
    } else {
      return Text("请选择图片或者视频");
    }
  }

  // 初始化播放器--用于播放本地视频
  Future _initVideo(File fileDir) async {
    _videoPlayerController = VideoPlayerController.file(fileDir);
    await _videoPlayerController.initialize();

    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController,
      aspectRatio: _videoPlayerController.value.aspectRatio,
      autoPlay: true,
      looping: false
    );
  }

  
  void dispose() {
    try {
      _videoPlayerController.dispose();
      _chewieController.dispose();
    } catch (e) {
      print(e);
    }
   
    super.dispose();
  }

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("图片选择器"),
      ),
      body: ListView(
        padding: EdgeInsets.all(10),
        children: [
          Center(child: ElevatedButton(
            onPressed: _imagePickerGallery, 
            child: Text("图片-选择相册")
          )),
          Center(child: ElevatedButton(
            onPressed: _imagePickerCamera, 
            child: Text("图片-选择相机")
          )),
          Center(child: ElevatedButton(
            onPressed: _videoPickerGallery, 
            child: Text("视频-选择相册")
          )),
          Center(child: ElevatedButton(
            onPressed: _videoPickerCamera, 
            child: Text("视频-选择相机")
          )),
          SizedBox(height: 20),
          // 展示图片或者视频
          _showImageOrVideoWidget()
        ],
      ),
    );
  }
}
  1. 效果图
    在这里插入图片描述
  2. 上传文件(未测试,先记录)
  _uploadFile(String imagePath) async {
    var formData = FormData.fromMap({
        'name': 'wendux', 
        'age': 25, 
        'file': await MultipartFile.fromFile(imagePath, filename: 'aaa.png')
    }); 
    
    var response = await Dio().post(
      'https://xxx/imgupload', 
      data: formData
    );
    print(response); 
  }
}

http://www.kler.cn/a/589442.html

相关文章:

  • PHP:从入门到进阶的编程之旅
  • 语言大模型的模型微调方法LoRA
  • Linux进程状态详解:僵尸进程与孤儿进程的深度探索与实践
  • idea如何新建springboot项目
  • OpenManus:无需邀请码的开源版Manus,开启自动化新纪元
  • 2024山东大学计算机复试上机真题
  • 50个常用的DeepSeek提示词
  • linux环境下快速输出电脑的系统/硬件/显卡/网络/已安装软件等信息
  • 查看IP地址/Ping 命令
  • 学习threejs,使用MeshLambertMaterial漫反射材质
  • 微服务》》Kubernetes (K8S)安装
  • 网络安全和文档的关系
  • 【学习笔记】GPT系列模型演变过程
  • 嵌入式开发之STM32学习笔记day06
  • 算法016——最小覆盖子串
  • ABAP OPEN DATASET
  • nginx处理跨域问题以及隐藏第三方地址
  • 适配iOS 18:检测并移除三方库中的 bitcode 部分
  • CentOS高性能数据处理优化指南
  • 微服务存在的问题及解决方案