Flutter应用程序开发：相机插件使用相机拍照

terry 2年前 (2023-09-22) 阅读数 93 #移动小程序

在应用程序中使用相机当然很常见。摄像头肯定涉及到底层原生代码的调用，那么如何在flutter函数中快速、轻松地使用摄像头呢？

让我们看看。

使用相机的准备工作

Flutter 提供了一个名为camera 的插件用于使用相机。我们需要先安装这个插件。

安装插件的步骤非常简单，如下图：

flutter pub add camera

这个命令在pubspec.xml中添加如下内容：

dependencies:
  flutter:
    sdk: flutter

  camera: ^0.10.0+1

除了相机之外，我们还需要保存相机拍摄的照片相机，所以我们还需要使用path_provider和path这两个插件。

我们用同样的方法安装这两个插件。

安装完成后，我们就可以愉快地在代码中使用相机了。

在使用相机之前，我们也必须获得相应的同意信息。例如，在iOS中我们需要在ios/Runner/Info.plist中添加以下权限信息：

<key>NSCameraUsageDescription</key>
<string>flutter需要用到你的照相机</string>

在andorid中，需要minSdkVersion>=。 21 使用。

在运动中使用相机

相机插件为我们提供了一系列功能来方便使用相机。

要使用相机，您需要按照以下步骤操作。由于当前的手机可以有多个摄像头，因此我们需要可以通过 API 使用的摄像头列表。

然后我们使用选择的摄像机进行一些操作，然后我们需要使用对应的摄像机视图来显示对应的摄像机图像。

最后调用相机相关拍摄功能进行拍照。

听起来很复杂，但其实一切都很简单，只要按照上面的顺序来就可以了。

首先我们需要获取可用摄像机的列表。这一步是通过调用相机包中的AvailableCameras方法来完成的：

Future<List<CameraDescription>> availableCameras() async {
  return CameraPlatform.instance.availableCameras();
}

availableCameras是一个异步方法，它返回一个Future对象，其值为CameraDescription列表。

CameraDescription 是摄像头的描述文件：

  const CameraDescription({
    required this.name,
    required this.lensDirection,
    required this.sensorOrientation,
  });

name 是摄像头的名称，lensDirection 是摄像头面向的方向，sensorOrientation 是传感器的方向，表示手机是平放还是平放放置在 90 度。

由于AvailableCameras是一个异步方法，所以我们需要将其包装在一个异步方法中来调用：

Future<void> main() async {
  // 保证所有的插件都加载完毕
  WidgetsFlutterBinding.ensureInitialized();

  //获取摄像头列表
  final cameras = await availableCameras();

  //拿到第一个摄像头
  final firstCamera = cameras.first;
  ....

这里我们得到了第一个摄像头。请注意，这里的firstCamera 是一个CameraDescription 对象。

由于模拟器上没有相机，所以在模拟器上运行上述程序会出现以下异常：

[VERBOSE-2:dart_vm_initializer.cc(41)] Unhandled Exception: Bad state: No element
#0      List.first (dart:core-patch/growable_array.dart:343:5)

为了控制这个相机，我们需要创建一个CameraController对象：

class CameraAppState extends State<CameraApp> {
  late CameraController _controller;
  late Future<void> _initializeControllerFuture;

  @override
  void initState() {
    super.initState();
    _controller = CameraController(
      widget.camera,
      ResolutionPreset.medium,
    );
    _initializeControllerFuture = _controller.initialize();
  }

CameraController的构造函数需要一个CameraDescription对象、分辨率等信息，并且还必须初始化。这里我们调用初始化方法。

这里的初始化方法也是异步方法。

为了能够在CameraController初始化后使用相机，我们需要在返回的widget中使用FutureBuilder来构建以下内容：

body: FutureBuilder<void>(
        future: _initializeControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return CameraPreview(_controller);
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        },
      )

具体应该显示什么内容？这里使用的是相机包自带的CameraPreview组件。

CameraPreview 需要传递一个 CameraController 对象，即我们之前创建的对象。

最后一步是调用CameraController方法进行拍照。我们把拍照的逻辑放在floatingActionButton中，如下所示：

floatingActionButton: FloatingActionButton(
        onPressed: () async {
          try {
            await _initializeControllerFuture;
            final image = await _controller.takePicture();

            if (!mounted) return;

            await Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => DisplayPictureScreen(
                  imagePath: image.path,
                ),
              ),
            );
          } catch (e) {
            print(e);
          }
        },
        child: const Icon(Icons.camera_alt),
      )

具体逻辑是调用controller.takePicture方法进行拍照。在新的小部件中显示创建的图像。