Flutter 相机和它的使用样例（flutter 相机插件）

木辛老师来了，本节课咱们一起来看看如何在Flutter中使用相机拍照功能吧！

请点击右上角“关注”按钮关注我们哟：跟着木辛老师学习Flutter基础编程知识，变身快乐的编程达人吧~

瞧一瞧，看一看，走过路过不要错过啦，今天的这篇文件是教给大家使用Flutter的官方库：camera。

通过这个库，我们会掌握如何捕获图像、预览图像、录制视频、暂停/停止录制、列出捕获的图像等等一些小技巧。

惊不惊喜，期不期待？那好，让我们赶紧开始吧。

camera

这是一个Flutter 的插件，可以支持iOS、Android和web应用访问设备的摄像头。

使用这个插件，你可以：

1. 在一个小widget中显示摄像头实时的视频预览；
2. 获取到快照并将其保持到文件中；
3. 录像

第一步：装它、装它、装它

开始使用这个组件之前，还是老一套的安装方法，修改pubspec.yaml文件，并且在dependency中添加camera的依赖：

dependencies:
 camera: ^0.9.4+2

同步

flutter pub get

当然了，也可以直接使用命令行添加

$ flutter pub add camera

第二步：针对不同平台做设置

因为不同平台的差别，我们需要稍微的配置一下。

Android

在项目的android/app/build.gradle文件中，你需要确保Android SDK不能低于21（当然更高更好啦）

minSdkVersion 21

iOS

注意：在iOS中相机这个功能要求你在iOS10及以上版本中。如果为低于 10.0 的任何版本进行编译，请务必在使用任何相机插件功能之前，对设备上运行的 iOS 版本进行编程检查。

通过修改ios/Runner/Info.plist文件，在其中添加如下内容：

添加Key值：Camera Usage Description 和针对使用它的描述

添加Key值：Microphone Usage Description和针对使用它的描述

如果是编辑模式，添加之后大体长得这个样子：

<key>NSCameraUsageDescription</key>
<string>Can I use the camera please?</string>
<key>NSMicrophoneUsageDescription</key>
<string>Can I use the mic please?</string>

Web

针对Web端的应用，你需要使用camera_web插件。

第三步：开始编写代码

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


List<CameraDescription> cameras;


Future<void> main() async {
 WidgetsFlutterBinding.ensureInitialized();


 cameras = await availableCameras();
 runApp(CameraApp());
}


class CameraApp extends StatefulWidget {
 @override
 _CameraAppState createState() => _CameraAppState();
}


class _CameraAppState extends State<CameraApp> {
 CameraController controller;


 @override
 void initState() {
 super.initState();
 controller = CameraController(cameras[0], ResolutionPreset.max);
 controller.initialize().then((_) {
 if (!mounted) {
 return;
 }
 setState(() {});
 });
 }


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


 @override
 Widget build(BuildContext context) {
 if (!controller.value.isInitialized) {
 return Container();
 }
 return MaterialApp(
 home: CameraPreview(controller),
 );
 }
}

这个简单的例子就先到这里吧。

请大家关注木辛老师的课程哟，获取更多编程知识和编程技巧。接下来，木辛老师和大家一步一步地学习Flutter知识吧。

快乐编程，快乐成长！

咱们下节课再见，88~