Flutter图片选择插件 image_picker 的使用

简介

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

安装

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

dependencies:
  image_picker: ^0.8.5+3

iOS 配置

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

• NSPhotoLibraryUsageDescription: 描述为什么你的应用需要访问照片库。
• NSCameraUsageDescription: 描述为什么你的应用需要访问相机。
• NSMicrophoneUsageDescription: 如果你打算录制视频，还需要描述为什么需要访问麦克风。

Android 配置

无需额外配置，但建议为处理Android系统在内存不足时杀死应用的情况做好准备。你可以参考文档中的Handling MainActivity destruction on Android部分了解如何处理这种情况。

示例代码

下面是一个完整的示例Demo，展示了如何使用image_picker插件来选择图片和拍摄照片。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Image Picker Demo',
      home: MyHomePage(title: 'Image Picker Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, this.title});

  final String? title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ImagePicker picker = ImagePicker();
  List<XFile>? _imageFiles;
  XFile? _photoFile;

  Future<void> _pickImageFromGallery() async {
    final XFile? pickedFile = await picker.pickImage(source: ImageSource.gallery);
    if (pickedFile != null) {
      setState(() {
        _imageFiles = [pickedFile];
      });
    }
  }

  Future<void> _takePhotoWithCamera() async {
    final XFile? photo = await picker.pickImage(source: ImageSource.camera);
    if (photo != null) {
      setState(() {
        _photoFile = photo;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _pickImageFromGallery,
              child: const Text('Pick Image from Gallery'),
            ),
            ElevatedButton(
              onPressed: _takePhotoWithCamera,
              child: const Text('Take a Photo with Camera'),
            ),
            if (_imageFiles != null)
              Expanded(
                child: ListView.builder(
                  itemCount: _imageFiles!.length,
                  itemBuilder: (context, index) {
                    return Image.file(_imageFiles![index].path as File);
                  },
                ),
              ),
            if (_photoFile != null)
              Image.file(_photoFile!.path as File),
          ],
        ),
      ),
    );
  }
}