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

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

步骤

  • 添加所需依赖

  • 获取可用相机列表

  • 创建并初始化 CameraController

  • 使用 CameraPreview 展示相机的帧流

  • 使用 CameraController 拍摄一张图片

  • 使用 Image 组件展示图片

1. 添加所需依赖

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

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

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

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

  1. dependencies:
  2.   flutter:
  3.     sdk: flutter
  4.   camera:
  5.   path_provider:
  6.   path:

2. 获取可用相机列表

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

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

3. 创建并初始化 CameraController

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

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

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

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

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

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

  • 在 dispose 方法中销毁控制器

  1. // A screen that takes in a list of Cameras and the Directory to store images.
  2. class TakePictureScreen extends StatefulWidget {
  3.   final CameraDescription camera;
  5.   const TakePictureScreen({
  6.     Key key,
  7.     @required this.camera,
  8.   }) : super(key: key);
  10.   @override
  11.   TakePictureScreenState createState() => TakePictureScreenState();
  12. }
  14. class TakePictureScreenState extends State<TakePictureScreen> {
  15.   // Add two variables to the state class to store the CameraController and
  16.   // the Future
  17.   CameraController _controller;
  18.   Future<void> _initializeControllerFuture;
  20.   @override
  21.   void initState() {
  22.     super.initState();
  23.     // In order to display the current output from the Camera, you need to
  24.     // create a CameraController.
  25.     _controller = CameraController(
  26.       // Get a specific camera from the list of available cameras
  27.       widget.camera,
  28.       // Define the resolution to use
  29.       ResolutionPreset.medium,
  30.     );
  32.     // Next, you need to initialize the controller. This returns a Future
  33.     _initializeControllerFuture = _controller.initialize();
  34.   }
  36.   @override
  37.   void dispose() {
  38.     // Make sure to dispose of the controller when the Widget is disposed
  39.     _controller.dispose();
  40.     super.dispose();
  41.   }
  43.   @override
  44.   Widget build(BuildContext context) {
  45.     // Fill this out in the next steps
  46.   }
  47. }

请注意：: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 完成这个任务。

  1. // You must wait until the controller is initialized before displaying the
  2. // camera preview. Use a FutureBuilder to display a loading spinner until the
  3. // controller has finished initializing
  4. FutureBuilder<void>(
  5.   future: _initializeControllerFuture,
  6.   builder: (context, snapshot) {
  7.     if (snapshot.connectionState == ConnectionState.done) {
  8.       // If the Future is complete, display the preview
  9.       return CameraPreview(_controller);
  10.     } else {
  11.       // Otherwise, display a loading indicator
  12.       return Center(child: CircularProgressIndicator());
  13.     }
  14.   },
  15. )

5. 使用 CameraController 拍照

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

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

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

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

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

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

  1. FloatingActionButton(
  2.   child: Icon(Icons.camera_alt),
  3.   // Provide an onPressed callback
  4.   onPressed: () async {
  5.     // Take the Picture in a try / catch block. If anything goes wrong,
  6.     // catch the error.
  7.     try {
  8.       // Ensure the camera is initialized
  9.       await _initializeControllerFuture;
  11.       // Construct the path where the image should be saved using the path
  12.       // package.
  13.       final path = join(
  14.         // In this example, store the picture in the temp directory. Find
  15.         // the temp directory using the `path_provider` plugin.
  16.         (await getTemporaryDirectory()).path,
  17.         '${DateTime.now()}.png',
  18.       );
  20.       // Attempt to take a picture and log where it's been saved
  21.       await _controller.takePicture(path);
  22.     } catch (e) {
  23.       // If an error occurs, log the error to the console.
  24.       print(e);
  25.     }
  26.   },
  27. )

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

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

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

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

完整示例

  1. import 'dart:async';
  2. import 'dart:io';
  4. import 'package:camera/camera.dart';
  5. import 'package:flutter/material.dart';
  6. import 'package:path/path.dart' show join;
  7. import 'package:path_provider/path_provider.dart';
  9. Future<void> main() async {
  10.   // Obtain a list of the available cameras on the device.
  11.   final cameras = await availableCameras();
  13.   // Get a specific camera from the list of available cameras
  14.   final firstCamera = cameras.first;
  16.   runApp(
  17.     MaterialApp(
  18.       theme: ThemeData.dark(),
  19.       home: TakePictureScreen(
  20.         // Pass the appropriate camera to the TakePictureScreen Widget
  21.         camera: firstCamera,
  22.       ),
  23.     ),
  24.   );
  25. }
  27. // A screen that allows users to take a picture using a given camera
  28. class TakePictureScreen extends StatefulWidget {
  29.   final CameraDescription camera;
  31.   const TakePictureScreen({
  32.     Key key,
  33.     @required this.camera,
  34.   }) : super(key: key);
  36.   @override
  37.   TakePictureScreenState createState() => TakePictureScreenState();
  38. }
  40. class TakePictureScreenState extends State<TakePictureScreen> {
  41.   CameraController _controller;
  42.   Future<void> _initializeControllerFuture;
  44.   @override
  45.   void initState() {
  46.     super.initState();
  47.     // In order to display the current output from the Camera, you need to
  48.     // create a CameraController.
  49.     _controller = CameraController(
  50.       // Get a specific camera from the list of available cameras
  51.       widget.camera,
  52.       // Define the resolution to use
  53.       ResolutionPreset.medium,
  54.     );
  56.     // Next, you need to initialize the controller. This returns a Future
  57.     _initializeControllerFuture = _controller.initialize();
  58.   }
  60.   @override
  61.   void dispose() {
  62.     // Make sure to dispose of the controller when the Widget is disposed
  63.     _controller.dispose();
  64.     super.dispose();
  65.   }
  67.   @override
  68.   Widget build(BuildContext context) {
  69.     return Scaffold(
  70.       appBar: AppBar(title: Text('Take a picture')),
  71.       // You must wait until the controller is initialized before displaying the
  72.       // camera preview. Use a FutureBuilder to display a loading spinner until
  73.       // the controller has finished initializing
  74.       body: FutureBuilder<void>(
  75.         future: _initializeControllerFuture,
  76.         builder: (context, snapshot) {
  77.           if (snapshot.connectionState == ConnectionState.done) {
  78.             // If the Future is complete, display the preview
  79.             return CameraPreview(_controller);
  80.           } else {
  81.             // Otherwise, display a loading indicator
  82.             return Center(child: CircularProgressIndicator());
  83.           }
  84.         },
  85.       ),
  86.       floatingActionButton: FloatingActionButton(
  87.         child: Icon(Icons.camera_alt),
  88.         // Provide an onPressed callback
  89.         onPressed: () async {
  90.           // Take the Picture in a try / catch block. If anything goes wrong,
  91.           // catch the error.
  92.           try {
  93.             // Ensure the camera is initialized
  94.             await _initializeControllerFuture;
  96.             // Construct the path where the image should be saved using the path
  97.             // package.
  98.             final path = join(
  99.               // In this example, store the picture in the temp directory. Find
  100.               // the temp directory using the `path_provider` plugin.
  101.               (await getTemporaryDirectory()).path,
  102.               '${DateTime.now()}.png',
  103.             );
  105.             // Attempt to take a picture and log where it's been saved
  106.             await _controller.takePicture(path);
  108.             // If the picture was taken, display it on a new screen
  109.             Navigator.push(
  110.               context,
  111.               MaterialPageRoute(
  112.                 builder: (context) => DisplayPictureScreen(imagePath: path),
  113.               ),
  114.             );
  115.           } catch (e) {
  116.             // If an error occurs, log the error to the console.
  117.             print(e);
  118.           }
  119.         },
  120.       ),
  121.     );
  122.   }
  123. }
  125. // A Widget that displays the picture taken by the user
  126. class DisplayPictureScreen extends StatelessWidget {
  127.   final String imagePath;
  129.   const DisplayPictureScreen({Key key, this.imagePath}) : super(key: key);
  131.   @override
  132.   Widget build(BuildContext context) {
  133.     return Scaffold(
  134.       appBar: AppBar(title: Text('Display the Picture')),
  135.       // The image is stored as a file on the device. Use the `Image.file`
  136.       // constructor with the given path to display the image
  137.       body: Image.file(File(imagePath)),
  138.     );
  139.   }
  140. }