很多应用都需要使用到设备的相机模块拍摄图片和视频。因此，Flutter 提供了 camera 插件。camera 插件提供了一系列可用的相机，并使用特定的相机展示相机预览、拍照、录视频。

这个章节将会讲解如何使用 camera 插件去展示相机预览、拍照并显示。

步骤

• 添加所需依赖

• 获取可用相机列表

• 创建并初始化 CameraController

• 使用 CameraPreview 展示相机的帧流

• 使用 CameraController 拍摄一张图片

• 使用 Image 组件展示图片

1. 添加所需依赖

为了完成这个章节，你需要向你的应用添加三个依赖：

• camera - 提供使用设备相机模块的工具

• path_provider - 寻找存储图片的正确路径

• path - 创建适配任何平台的路径

dependencies:
  flutter:
    sdk: flutter
  camera:
  path_provider:
  path:

2. 获取可用相机列表

接着，你可以使用 camera 插件获取可用相机列表。

// Obtain a list of the available cameras on the device.
final cameras = await availableCameras();
// Get a specific camera from the list of available cameras
final firstCamera = cameras.first; 

3. 创建并初始化 CameraController

在选择了一个相机后，你需要创建并初始化 CameraController。在这个过程中，与设备相机建立了连接并允许你控制相机并展示相机的预览帧流。

实现这个过程，请依照以下步骤：

• 创建一个带有 State 类的 StatefulWidget 组件

• 添加一个变量到 State 类来存放 CameraController

• 添加另外一个变量到 State 类中来存放 CameraController.initialize 返回的 Future

• 在 initState 方法中创建并初始化控制器

• 在 dispose 方法中销毁控制器

// A screen that takes in a list of Cameras and the Directory to store images.
class TakePictureScreen extends StatefulWidget {
  final CameraDescription camera;
  const TakePictureScreen({
    Key key,
    @required this.camera,
  }) : super(key: key);
  @override
  TakePictureScreenState createState() => TakePictureScreenState();
}
class TakePictureScreenState extends State<TakePictureScreen> {
  // Add two variables to the state class to store the CameraController and
  // the Future
  CameraController _controller;
  Future<void> _initializeControllerFuture;
  @override
  void initState() {
    super.initState();
    // In order to display the current output from the Camera, you need to
    // create a CameraController.
    _controller = CameraController(
      // Get a specific camera from the list of available cameras
      widget.camera,
      // Define the resolution to use
      ResolutionPreset.medium,
    );
    // Next, you need to initialize the controller. This returns a Future
    _initializeControllerFuture = _controller.initialize();
  }
  @override
  void dispose() {
    // Make sure to dispose of the controller when the Widget is disposed
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    // Fill this out in the next steps
  }
}

请注意：:If you do not initialize the CameraController, you cannot use the camerato display a preview and take pictures.

如果你没有初始化 CameraController，你就 不能 使用相机预览和拍照。

4. 在 initState 方法中创建并初始化控制器

接着，你能够使用 camera 中的 CameraPreview 组件来展示相机预览帧流。

请记住： 在使用相机前，请确保控制器已经完成初始化。因此，你一定要等待前一个步骤创建 _initializeControllerFuture 执行完毕才去展示 CameraPreview。

你可以使用 FutureBuilder 完成这个任务。

// You must wait until the controller is initialized before displaying the
// camera preview. Use a FutureBuilder to display a loading spinner until the
// controller has finished initializing
FutureBuilder<void>(
  future: _initializeControllerFuture,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      // If the Future is complete, display the preview
      return CameraPreview(_controller);
    } else {
      // Otherwise, display a loading indicator
      return Center(child: CircularProgressIndicator());
    }
  },
)

5. 使用 CameraController 拍照

你可以使用 CameraController 的 takePicture 方法拍照。在这个示例中，创建了一个浮动按钮 FloatingActionButton，用户点击这个按钮，就能通过 CameraController 来拍摄图片。

保存一张图片，需要经过一下三个步骤：

• 确保相机模块已经被初始化完成

• 创建图片需要被保存的路径

• 使用控制器拍摄一张图片并保存结果到上述路径

最好把这些操作都放在 try / catch 方法块中来处理可能发生的异常。

FloatingActionButton(
  child: Icon(Icons.camera_alt),
  // Provide an onPressed callback
  onPressed: () async {
    // Take the Picture in a try / catch block. If anything goes wrong,
    // catch the error.
    try {
      // Ensure the camera is initialized
      await _initializeControllerFuture;
      // Construct the path where the image should be saved using the path
      // package.
      final path = join(
        // In this example, store the picture in the temp directory. Find
        // the temp directory using the `path_provider` plugin.
        (await getTemporaryDirectory()).path,
        '${DateTime.now()}.png',
      );
      // Attempt to take a picture and log where it's been saved
      await _controller.takePicture(path);
    } catch (e) {
      // If an error occurs, log the error to the console.
      print(e);
    }
  },
)

6. 在 dispose 方法中销毁控制器

如果你能成功拍摄图片，你就可以使用 Image 组件展示被保存的图片。在这个示例中，这张图片是以文件的形式存储在设备中。

因此，你需要提供一个 File 给 Image.file 构造函数。你能够通过传递你在上一步中创建的路径来创建一个 File 类的实例。

Image.file(File('path/to/my/picture.png'))

完整示例

import 'dart:async';
import 'dart:io';
import 'package:camera/camera.dart';
import 'package:flutter/material.dart';
import 'package:path/path.dart' show join;
import 'package:path_provider/path_provider.dart';
Future<void> main() async {
  // Obtain a list of the available cameras on the device.
  final cameras = await availableCameras();
  // Get a specific camera from the list of available cameras
  final firstCamera = cameras.first;
  runApp(
    MaterialApp(
      theme: ThemeData.dark(),
      home: TakePictureScreen(
        // Pass the appropriate camera to the TakePictureScreen Widget
        camera: firstCamera,
      ),
    ),
  );
}
// A screen that allows users to take a picture using a given camera
class TakePictureScreen extends StatefulWidget {
  final CameraDescription camera;
  const TakePictureScreen({
    Key key,
    @required this.camera,
  }) : super(key: key);
  @override
  TakePictureScreenState createState() => TakePictureScreenState();
}
class TakePictureScreenState extends State<TakePictureScreen> {
  CameraController _controller;
  Future<void> _initializeControllerFuture;
  @override
  void initState() {
    super.initState();
    // In order to display the current output from the Camera, you need to
    // create a CameraController.
    _controller = CameraController(
      // Get a specific camera from the list of available cameras
      widget.camera,
      // Define the resolution to use
      ResolutionPreset.medium,
    );
    // Next, you need to initialize the controller. This returns a Future
    _initializeControllerFuture = _controller.initialize();
  }
  @override
  void dispose() {
    // Make sure to dispose of the controller when the Widget is disposed
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Take a picture')),
      // You must wait until the controller is initialized before displaying the
      // camera preview. Use a FutureBuilder to display a loading spinner until
      // the controller has finished initializing
      body: FutureBuilder<void>(
        future: _initializeControllerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            // If the Future is complete, display the preview
            return CameraPreview(_controller);
          } else {
            // Otherwise, display a loading indicator
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.camera_alt),
        // Provide an onPressed callback
        onPressed: () async {
          // Take the Picture in a try / catch block. If anything goes wrong,
          // catch the error.
          try {
            // Ensure the camera is initialized
            await _initializeControllerFuture;
            // Construct the path where the image should be saved using the path
            // package.
            final path = join(
              // In this example, store the picture in the temp directory. Find
              // the temp directory using the `path_provider` plugin.
              (await getTemporaryDirectory()).path,
              '${DateTime.now()}.png',
            );
            // Attempt to take a picture and log where it's been saved
            await _controller.takePicture(path);
            // If the picture was taken, display it on a new screen
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DisplayPictureScreen(imagePath: path),
              ),
            );
          } catch (e) {
            // If an error occurs, log the error to the console.
            print(e);
          }
        },
      ),
    );
  }
}
// A Widget that displays the picture taken by the user
class DisplayPictureScreen extends StatelessWidget {
  final String imagePath;
  const DisplayPictureScreen({Key key, this.imagePath}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Display the Picture')),
      // The image is stored as a file on the device. Use the `Image.file`
      // constructor with the given path to display the image
      body: Image.file(File(imagePath)),
    );
  }
}