Flutter图片选择与相机及相册访问插件 camera_gallery_image_picker 的使用

camera_gallery_image_picker 是一个用于在Flutter应用中简单且可定制地从相机拍摄照片和从相册选择照片的插件。它支持同时从相机和相册中选择图片。

平台支持

安装

在您的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  camera_gallery_image_picker: ^0.0.4

然后运行 flutter pub get 来安装该包。

iOS配置

在您的 Info.plist 文件中添加以下键值对：

<key>NSCameraUsageDescription</key>
<string>Describe why you need camera permission</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Describe why you need photo library permission</string>

Android配置

无需任何额外配置。

使用方法

首先，导入该包：

import 'package:camera_gallery_image_picker/camera_gallery_image_picker.dart';

示例代码

以下是一个完整的示例应用程序，展示了如何使用 camera_gallery_image_picker 插件来捕获或选择图片，并在UI上显示它们。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example Camera Gallery Image Picker',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const CameraGalleryImagePickerExample(),
    );
  }
}

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

  [@override](/user/override)
  State<CameraGalleryImagePickerExample> createState() => _CameraGalleryImagePickerState();
}

class _CameraGalleryImagePickerState extends State<CameraGalleryImagePickerExample> {
  File? _imageFile;
  List<File> _multipleImageFiles = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            if (_imageFile != null) ...[
              Image.file(
                _imageFile!,
                height: 200,
              ),
              const SizedBox(height: 20),
            ],
            if (_multipleImageFiles.isNotEmpty) ...[
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: _multipleImageFiles
                      .map(
                        (File file) => Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Image.file(
                            file,
                            height: 100,
                          ),
                        ),
                      )
                      .toList(),
                ),
              ),
              const SizedBox(height: 20),
            ],
            TextButton(
              onPressed: () async {
                _imageFile = await CameraGalleryImagePicker.pickImage(
                  context: context,
                  source: ImagePickerSource.camera,
                );
                setState(() {});
              },
              child: const Text(
                'Capture Image from Camera',
              ),
            ),
            const SizedBox(height: 10),
            TextButton(
              onPressed: () async {
                _imageFile = await CameraGalleryImagePicker.pickImage(
                  context: context,
                  source: ImagePickerSource.gallery,
                );
                setState(() {});
              },
              child: const Text(
                'Pick Image from Gallery',
              ),
            ),
            const SizedBox(height: 10),
            TextButton(
              onPressed: () async {
                _imageFile = await CameraGalleryImagePicker.pickImage(
                  context: context,
                  source: ImagePickerSource.both,
                );
                setState(() {});
              },
              child: const Text(
                'Pick Image from Both',
              ),
            ),
            const SizedBox(height: 10),
            TextButton(
              onPressed: () async {
                _multipleImageFiles = await CameraGalleryImagePicker.pickMultiImage();
                setState(() {});
              },
              child: const Text(
                'Pick Multiple Images',
              ),
            ),
          ],
        ),
      ),
    );
  }
}