Flutter图片选择插件image_picker的使用

简介

image_picker 是一个Flutter插件，允许用户从相册中选择图片或使用相机拍摄新照片。它支持iOS、Android，并且在Linux、macOS和Windows平台上也有一定的支持。

支持平台

安装

首先，在pubspec.yaml文件中添加image_picker作为依赖：

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^0.8.5+3 # 使用最新版本

iOS配置

需要在Info.plist文件中添加以下权限描述：

• NSPhotoLibraryUsageDescription - 描述为什么应用需要访问相册。
• NSCameraUsageDescription - 描述为什么应用需要访问相机。
• NSMicrophoneUsageDescription - 如果应用需要录制视频，则需描述为什么需要访问麦克风。

<key>NSPhotoLibraryUsageDescription</key>
<string>需要您的同意以访问相册</string>
<key>NSCameraUsageDescription</key>
<string>需要您的同意以访问相机</string>
<key>NSMicrophoneUsageDescription</key>
<string>需要您的同意以访问麦克风</string>

Android配置

无需额外配置，但建议处理Android在低内存情况下销毁MainActivity的情况。可以使用ImagePicker.retrieveLostData()方法来恢复丢失的数据。

示例代码

下面是一个完整的示例代码，展示了如何使用image_picker插件：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Picker Demo',
      home: MyHomePage(title: 'Image Picker Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<XFile>? _mediaFileList;
  dynamic _pickImageError;
  bool isVideo = false;

  final ImagePicker _picker = ImagePicker();

  Future<void> _onImageButtonPressed(ImageSource source, {BuildContext? context, bool isMultiImage = false, bool isMedia = false}) async {
    if (isVideo) {
      final XFile? file = await _picker.pickVideo(source: source);
      setState(() {
        _mediaFileList = file == null ? null : [file];
      });
    } else if (isMultiImage) {
      final List<XFile>? pickedFileList = await _picker.pickMultiImage();
      setState(() {
        _mediaFileList = pickedFileList;
      });
    } else if (isMedia) {
      final XFile? media = await _picker.pickMedia();
      setState(() {
        _mediaFileList = media == null ? null : [media];
      });
    } else {
      final XFile? pickedFile = await _picker.pickImage(source: source);
      setState(() {
        _mediaFileList = pickedFile == null ? null : [pickedFile];
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Center(
        child: _mediaFileList == null
            ? Text('You have not yet picked an image.')
            : ListView.builder(
                itemCount: _mediaFileList!.length,
                itemBuilder: (context, index) {
                  return Image.file(File(_mediaFileList![index].path));
                },
              ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () {
              isVideo = false;
              _onImageButtonPressed(ImageSource.gallery, context: context);
            },
            tooltip: 'Pick Image from gallery',
            child: Icon(Icons.photo_library),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 16.0),
            child: FloatingActionButton(
              onPressed: () {
                isVideo = true;
                _onImageButtonPressed(ImageSource.gallery, context: context);
              },
              tooltip: 'Pick Video from gallery',
              child: Icon(Icons.video_library),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 16.0),
            child: FloatingActionButton(
              onPressed: () {
                isVideo = false;
                _onImageButtonPressed(ImageSource.camera, context: context);
              },
              tooltip: 'Take a Photo',
              child: Icon(Icons.camera_alt),
            ),
          ),
        ],
      ),
    );
  }
}

这个示例代码展示了一个简单的Flutter应用程序，其中包含三个按钮，分别用于从相册中选择图片、从相册中选择视频以及使用相机拍照。选择的图片或视频会显示在界面上。

迁移至1.0版本

从版本0.8.2开始，image_picker返回的是XFile实例而不是之前的PickedFile实例。以下是迁移指南：

通过以上步骤，您可以轻松地将旧版本的应用程序迁移到最新的image_picker版本。

希望这些信息对您有所帮助！如果您有任何问题，请随时提问。