Flutter相机拍照与图片选择插件flutter_camera_picker的使用

Flutter相机拍照与图片选择插件flutter_camera_picker的使用

功能

flutter_camera_picker 插件允许您一次性拍摄多张照片，并将这些照片返回给您进行处理。以下是该插件的一些功能：

• 预览：

入门指南

此插件依赖于 camera 包，因此请按照 camera 包的设置步骤为 iOS 和 Android 进行配置。

使用方法

以下是一个完整的示例代码，展示了如何使用 flutter_camera_picker 插件来实现相机拍照和图片选择功能。

import 'package:flutter/material.dart';
import 'package:flutter_camera_picker/flutter_camera_picker.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class HomePage extends StatelessWidget {
  final String title;

  const HomePage({Key? key, required this.title}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: HookBuilder(builder: (context) {
          // 使用 useState 钩子来管理选中的图片列表
          final files = useState<List<XFile>>([]);

          return Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              if (files.value.isEmpty)
                const Text('您还没有选择任何文件'),
              if (files.value.isNotEmpty)
                ImagesPreview(files: files.value), // 显示已选中的图片预览
              const SizedBox(height: 16),
              ElevatedButton(
                onPressed: () async {
                  // 打开相机选择器
                  final results = await Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => CameraPicker(
                        initialFiles: files.value, // 初始化时传入选中的图片
                        onDelete: (file) async {
                          // 删除图片时弹出确认对话框
                          final confirm = (await showDialog(
                                context: context,
                                builder: (context) => AlertDialog(
                                  title: const Text('删除图片？'),
                                  content: const Text('您确定要删除这张图片吗？'),
                                  actions: [
                                    TextButton(
                                      onPressed: () {
                                        Navigator.of(context).pop(false);
                                      },
                                      child: const Text('取消'),
                                    ),
                                    TextButton(
                                      onPressed: () {
                                        Navigator.of(context).pop(true);
                                      },
                                      child: const Text('确定'),
                                    ),
                                  ],
                                ),
                              )) ??
                              false;
                          return confirm;
                        },
                      ),
                    ),
                  );

                  // 如果有新的图片被选中，更新状态
                  if (results != null) {
                    files.value = List.from(results);
                  }
                },
                child: const Text('从相机拍摄图片'),
              ),
            ],
          );
        }),
      ),
    );
  }
}

// 图片预览组件
class ImagesPreview extends StatelessWidget {
  final List<XFile> files;

  const ImagesPreview({Key? key, required this.files}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GridView.builder(
      shrinkWrap: true,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        crossAxisSpacing: 8.0,
        mainAxisSpacing: 8.0,
      ),
      itemCount: files.length,
      itemBuilder: (context, index) {
        return Image.file(
          File(files[index].path),
          fit: BoxFit.cover,
        );
      },
    );
  }
}