Flutter相机功能插件camera_camera_2的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter相机功能插件camera_camera_2的使用

重要信息

这是camera_camera包的一个新版本。在这个版本中,我修复了大部分相机错误,例如在设备方向改变后相机崩溃以及在截图时出现的崩溃问题。我还重构了代码使其更加清晰易编辑。如果你发现任何错误,请在git仓库中提交一个issue。

新功能

  • 添加了变焦功能!
  • 添加了闪光模式功能。
  • 可以选择相机侧(前置或后置)。
  • 返回照片文件的回调函数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是一个小部件,你可以在任何地方使用它。

示例 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), // 相机图标
      ),
);

路线图 2.0

功能 进度
变焦
闪光
选择相机侧
null安全支持
添加曝光控制
添加简易视频模式
添加相册

贡献

欢迎提交拉取请求。对于重大更改,请先打开一个问题讨论你想要进行的更改。

请确保更新相应的测试用例。

许可证

MIT


示例代码

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

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

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

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

  final String title;

  [@override](/user/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](/user/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: Image.file(
              photos[index],
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: openCamera,
        child: Icon(Icons.camera_alt),
      ),
    );
  }
}

更多关于Flutter相机功能插件camera_camera_2的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter相机功能插件camera_camera_2的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用camera插件(注意,您提到的camera_camera_2可能是一个误写,Flutter社区中广泛使用的相机插件是camera)来实现相机功能的示例代码。

首先,确保在您的pubspec.yaml文件中添加了camera插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  camera: ^0.14.5+3  # 请检查最新版本号并更新

然后,运行flutter pub get来安装依赖。

接下来,您需要在AndroidManifest.xmlInfo.plist中添加必要的权限配置。

对于Android(在android/app/src/main/AndroidManifest.xml中添加):

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-feature android:name="android.hardware.camera" android:required="true" />
    <uses-feature android:name="android.hardware.camera.autofocus" />

    <application
        ...>
        <activity ...>
            ...
            <meta-data
                android:name="io.flutter.embedding.android.NormalTheme"
                android:resource="@style/NormalTheme" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

对于iOS(在ios/Runner/Info.plist中添加):

<key>NSCameraUsageDescription</key>
<string>Need camera access</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Need photo library access</string>
<key>NSMicrophoneUsageDescription</key>
<string>Need microphone access</string>

接下来是Flutter代码部分,创建一个简单的相机应用:

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

List<CameraDescription> cameras;
CameraController? controller;

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    availableCameras().then((availableCameras) {
      cameras = availableCameras;

      if (cameras.isEmpty) {
        print('No cameras found');
        return;
      }

      // Use the first camera on the device.
      controller = CameraController(
        cameras[0],
        ResolutionPreset.medium,
      );

      controller!.initialize().then((_) {
        if (!mounted) {
          return;
        }
        setState(() {});
      });
    }).catchError((err) {
      print('Error: $err.code\n${err.message}');
    });
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (!controller!.value.isInitialized) {
      return Container();
    }
    return Scaffold(
      appBar: AppBar(
        title: Text('Camera'),
      ),
      body: Center(
        child: CameraPreview(controller!),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.camera_alt),
        onPressed: () async {
          try {
            final XFile? picture = await controller!.takePicture();

            if (mounted) {
              setState(() {});
            }

            if (picture != null) {
              // Display the captured image
              showDialog(
                context: context,
                builder: (context) => AlertDialog(
                  content: Image.file(File(picture.path)),
                ),
              );
            }
          } catch (e) {
            print(e);
          }
        },
      ),
    );
  }
}

这个示例代码展示了如何使用camera插件来初始化相机、显示相机预览以及拍摄照片。注意,您需要在运行应用之前确保设备上有可用的相机,并且已经授予了必要的权限。

回到顶部