Flutter相机功能插件camera_camera的使用

Camera_Camera 3.0

新特性

• 添加缩放功能！
• 添加闪光灯模式
• 支持Web平台！
• 添加切换摄像头功能，可以选择你偏好的摄像头侧（前置或后置）
• 回调函数用于返回照片文件 onFile(File yourFile)
• 移除使用 Navigator.pop(context, file) 返回文件的方式
• 重构内部结构

安装指南

Android

你需要在 app/build.gradle 中添加以下内容：

minSdkVersion 21

iOS

你需要在 info.plist 中添加以下内容：

<key>NSCameraUsageDescription</key>
<string>Can I use the camera please?</string>
<key>NSMicrophoneUsageDescription</key>
<string>Can I use the mic please?</string>

Flutter

在 pubspec.yaml 中添加包：

camera_camera: current_version

使用方法

Camera_Camera 是一个Widget，可以放在任何地方使用。

示例 01

return Scaffold(
  body: CameraCamera(
    onFile: (file) => print(file),
  ),
);

示例 02

return Scaffold(
  body: CameraCamera(
    onFile: (file) => print(file),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (_) => CameraCamera(
            onFile: (file) {
              photos.add(file);
              // 拍照后关闭相机
              Navigator.pop(context);
              setState(() {});
            },
          ),
        ),
      );
    },
    child: Icon(Icons.camera_alt),
  ),
);

3.0 版本路线图

贡献

欢迎提交Pull请求。对于重大更改，请先创建一个issue讨论你希望进行的更改。

请确保适当更新测试。

许可证

MIT

示例代码

import 'dart:io';
import 'package:camera_camera/camera_camera.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Camera Camera 3.0',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Camera Camera 3.0'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final photos = <File>[];

  void openCamera() {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => CameraCamera(
          onFile: (file) {
            photos.add(file);
            Navigator.pop(context);
            setState(() {});
          },
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        itemCount: photos.length,
        itemBuilder: (_, index) => Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            width: size.width,
            child: kIsWeb
                ? Image.network(photos[index].path)
                : Image.file(
                    photos[index],
                    fit: BoxFit.cover,
                  ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: openCamera,
        child: Icon(Icons.camera_alt),
      ),
    );
  }
}

以上代码展示了如何在Flutter应用中使用 camera_camera 插件来实现拍照功能，并将拍摄的照片显示在一个网格视图中。希望对你有所帮助！