首页 > 其他分享 >flutter系列之:在flutter中使用相机拍摄照片

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

时间:2023-04-04 19:35:21浏览次数:72  
标签:拍摄 插件 相机 CameraController camera 使用 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

标签:拍摄,插件,相机,CameraController,camera,使用,flutter,摄像头
From: https://blog.51cto.com/flydean/6169278

相关文章

  • flutter系列之:在flutter中使用相机拍摄照片
    目录简介使用相机前的准备工作在flutter中使用camera总结简介在app中使用相机肯定是再平常不过的一项事情了,相机肯定涉及到了底层原生代码的调用,那么在flutter中如何快速简单的使用上相机的功能呢?一起来看看吧。使用相机前的准备工作flutter中为使用camera提供了一个叫做came......
  • flutter系列之:创建一个内嵌的navigation
    目录简介搭建主Navigator构建子路由总结简介我们在flutter中可以使用Navigator.push或者Navigator.pushNamed方法来向Navigator中添加不同的页面,从而达到页面调整的目的。一般情况下这样已经足够了,但是有时候我们有多个Navigator的情况下,上面的使用方式就不够用了。比如我们有一个......
  • Three.js 进阶之旅:全景漫游-初阶移动相机版
    Three.js进阶之旅:全景漫游-初阶移动相机版 声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。摘要3D 全景技术可以实现日常生活中的很多功能需求,比如地图的街景全景模式、数字展厅、在线看房、社交......
  • 单反相机操作入门
    一、相机优势1、图像感应器面积数码单反相机与小型数码相机相比较,主要的区别就在于用于接受光线、进行成像的图像感应器面积大小不同。与通常采用1/2"图像感应器的小型数码相机相比,数码单反相机一般采用的APS-C画幅图像感应器拥有其约10倍的面积。因此在电子性能方面也有众多优点。......
  • Flutter 异步编程指南
    作者:京东物流 王志明1Dart中的事件循环模型在App开发中,经常会遇到处理异步任务的场景,如网络请求、读写文件等。Android、iOS使用的是多线程,而在Flutter中为单线程事件循环,如下图所示Dart中有两个任务队列,分别为microtask队列和event队列,队列中的任务按照先进先出......
  • Flutter和小程序容器技术的应用前景与发展潜力
    随着移动互联网的快速发展,应用程序已经成为人们生活中必不可少的一部分,而小程序和Flutter技术则是当前应用开发中备受瞩目的两大趋势。 小程序是一种轻量化的应用程序,其不需要用户下载安装即可使用,同时也具备了高效便捷的使用体验。而Flutter技术则是一种跨平台的应用开发技术......
  • UI朝向相机
    publicclassLookAtCamera:MonoBehaviour{privateenumMode{LookAt,LookAtInverted,Forward,ForwardInverted,}[SerializeField]privateModemode;voidLateUpdate(){switch(mode)......
  • Flutter中如何取消任务
    前言在开发过程中,取消需求是很常见的,但很容易被忽略。然而,取消需求的好处也很大。例如,在页面中会发送很多请求。如果页面被切走并处于不可见状态,就需要取消未完成的请求任务。如果未及时取消,则可能会导致以下负面影响:消耗用户额外数据流量。任务回调持有全局上下文变量,未及时......
  • flutter基础2
    1.有状态组件StatefulWidgetimport'package:flutter/material.dart';voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContextcontext){returnMaterialAp......
  • 你没看错:Instagram图标变成真相机
    假如Instagram卖相机的话,它会是什么样子?显然,Instagram不会这么做,但意大利设计工作室ADRStudio正试图将它变为现实,他们制作的Socialmatic概念相机外形酷似Instagram图标,且具有Instagram在线分享功能。这款概念数码相机名为Socialmatic,与Instagram图标一样,它也采用了四四方方的外形......