Flutter图片视频选择插件flutterimagevideopicker的使用

flutter_image_video_picker 是一个 Flutter 插件，用于从设备的相册或相机中选择图片和视频。这个插件可以帮助开发者轻松地实现图片和视频的选择功能。以下是如何使用 flutter_image_video_picker 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_image_video_picker 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_image_video_picker: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入 flutter_image_video_picker 插件：

import 'package:flutter_image_video_picker/flutter_image_video_picker.dart';

3. 使用插件选择图片或视频

你可以使用 FlutterImageVideoPicker.pickImage 或 FlutterImageVideoPicker.pickVideo 方法来选择图片或视频。

选择图片

Future<void> pickImage() async {
  final file = await FlutterImageVideoPicker.pickImage();
  if (file != null) {
    // 处理选中的图片文件
    print("图片路径: ${file.path}");
  } else {
    // 用户取消了选择
    print("用户取消了图片选择");
  }
}

选择视频

Future<void> pickVideo() async {
  final file = await FlutterImageVideoPicker.pickVideo();
  if (file != null) {
    // 处理选中的视频文件
    print("视频路径: ${file.path}");
  } else {
    // 用户取消了选择
    print("用户取消了视频选择");
  }
}

4. 在 UI 中调用方法

你可以在按钮的 onPressed 事件中调用上述方法：

ElevatedButton(
  onPressed: pickImage,
  child: Text("选择图片"),
),

ElevatedButton(
  onPressed: pickVideo,
  child: Text("选择视频"),
),

5. 处理权限

在使用相机或访问相册时，你可能需要处理权限。确保在 AndroidManifest.xml 和 Info.plist 中添加相应的权限配置。

Android

在 AndroidManifest.xml 中添加：

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

iOS

在 Info.plist 中添加：

<key>NSCameraUsageDescription</key>
<string>我们需要访问您的相机以拍摄照片或视频。</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>我们需要访问您的相册以选择照片或视频。</string>

6. 处理返回的文件

你可以使用 File 对象来处理选中的图片或视频文件。例如，你可以将其显示在 Image 或 VideoPlayer 组件中。

Image.file(file),

或

VideoPlayerController _controller;

[@override](/user/override)
void initState() {
  super.initState();
  _controller = VideoPlayerController.file(file)
    ..initialize().then((_) {
      setState(() {});
    });
}

[@override](/user/override)
void dispose() {
  super.dispose();
  _controller.dispose();
}

[@override](/user/override)
Widget build(BuildContext context) {
  return _controller.value.isInitialized
      ? AspectRatio(
          aspectRatio: _controller.value.aspectRatio,
          child: VideoPlayer(_controller),
        )
      : Container();
}

7. 完整示例

以下是一个完整的示例，展示了如何使用 flutter_image_video_picker 插件选择图片和视频：

import 'package:flutter/material.dart';
import 'package:flutter_image_video_picker/flutter_image_video_picker.dart';
import 'dart:io';
import 'package:video_player/video_player.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ImageVideoPickerDemo(),
    );
  }
}

class ImageVideoPickerDemo extends StatefulWidget {
  [@override](/user/override)
  _ImageVideoPickerDemoState createState() => _ImageVideoPickerDemoState();
}

class _ImageVideoPickerDemoState extends State<ImageVideoPickerDemo> {
  File _imageFile;
  File _videoFile;
  VideoPlayerController _controller;

  Future<void> pickImage() async {
    final file = await FlutterImageVideoPicker.pickImage();
    setState(() {
      _imageFile = file;
      _videoFile = null;
      if (_controller != null) {
        _controller.dispose();
        _controller = null;
      }
    });
  }

  Future<void> pickVideo() async {
    final file = await FlutterImageVideoPicker.pickVideo();
    setState(() {
      _videoFile = file;
      _imageFile = null;
      if (_controller != null) {
        _controller.dispose();
      }
      _controller = VideoPlayerController.file(file)
        ..initialize().then((_) {
          setState(() {});
        });
    });
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    if (_controller != null) {
      _controller.dispose();
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('图片视频选择示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            if (_imageFile != null) Image.file(_imageFile),
            if (_videoFile != null && _controller != null && _controller.value.isInitialized)
              AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              ),
            ElevatedButton(
              onPressed: pickImage,
              child: Text("选择图片"),
            ),
            ElevatedButton(
              onPressed: pickVideo,
              child: Text("选择视频"),
            ),
          ],
        ),
      ),
    );
  }
}