关于flutter:flutter系列之在flutter中使用相机拍摄照片

简介

在app中应用相机必定是再平时不过的一项事件了，相机必定波及到了底层原生代码的调用，那么在flutter中如何疾速简略的应用上相机的性能呢？

一起来看看吧。

应用相机前的筹备工作

flutter中为应用camera提供了一个叫做camera的插件，咱们首先须要装置这个插件。

装置插件的步骤很简略,如下所示：

flutter pub add camera  

该命令会在pubspec.xml中增加上面的内容：

dependencies:
  flutter:
    sdk: flutter

  camera: ^0.10.0+1

除了camera之外，咱们还须要对照相机拍摄的照片进行保留，这样咱们还须要用到path_provider和path这两个plugin。

咱们应用同样的形式对这两个插件进行装置。

装置好之后，咱们就能够在flutter中的代码中欢快的应用camera了。

在应用camera之前，咱们还须要获取相应的权限信息，比方在IOS中，咱们须要在 ios/Runner/Info.plist中增加上面的权限信息：

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

在andorid中须要配合minSdkVersion>=21来应用。

在flutter中应用camera

camera插件为咱们提供了一系列的性能来不便camera的应用。

camera的应用须要遵循上面的步骤，因为当初的手机可能会有多个摄像头，所以咱们须要通过api获取到能够应用的摄像头列表。

接下来咱们应用选中的摄像头，进行一些管制操作，而后须要应用相应的camera视图来展现相应的照相机图像.

最初调用摄像头相干的拍摄性能进行拍摄。

听起来如同挺简单的，事实上只有遵循下面的程序，一切都是非常简单的。

首先咱们须要获取可用的摄像头列表，这个步骤是通过调用camera包中的availableCameras办法来实现的：

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

availableCameras是一个异步办法，返回的是一个Future对象，其中的值是CameraDescription列表。

CameraDescription是对camera的形容文件:

  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)

为了对这个camra进行管制， 咱们须要创立一个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对象和分辨率等信息，并且还须要进行初始化，这里咱们调用了它的initialize办法。

这里的initialize办法也是一个异步办法。

为了在CameraController初始化之后再对Camera进行应用，咱们须要在返回的widget中应用FutureBuilder来构建：

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

具体要展现什么内容呢？这里应用的是camera包中自带的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办法进行拍照。将拍好照的image放在一个新的widget中展现。

总结

摄像头是app中罕用的性能，flutter中的camera插件为咱们提供了摄像头的管制性能，非常简单。

本文的例子：https://github.com/ddean2009/learn-flutter.git