Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >flutter系列之:在flutter中使用相机拍摄照片

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

原创
作者头像
程序那些事
发布于 2023-04-04 10:40:50
发布于 2023-04-04 10:40:50
2.3K10
代码可运行
举报
文章被收录于专栏:程序那些事程序那些事
运行总次数:0
代码可运行

简介

在app中使用相机肯定是再平常不过的一项事情了,相机肯定涉及到了底层原生代码的调用,那么在flutter中如何快速简单的使用上相机的功能呢?

一起来看看吧。

使用相机前的准备工作

flutter中为使用camera提供了一个叫做camera的插件,我们首先需要安装这个插件。

安装插件的步骤很简单,如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
flutter pub add camera  

该命令会在pubspec.xml中添加下面的内容:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
dependencies:
  flutter:
    sdk: flutter

  camera: ^0.10.0+1

除了camera之外,我们还需要对照相机拍摄的照片进行保存,这样我们还需要用到path_provider和path这两个plugin。

我们使用同样的方式对这两个插件进行安装。

安装好之后,我们就可以在flutter中的代码中愉快的使用camera了。

在使用camera之前,我们还需要获取相应的权限信息,比如在IOS中,我们需要在 ios/Runner/Info.plist中添加下面的权限信息:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<key>NSCameraUsageDescription</key>
<string>flutter需要用到你的照相机</string>

在andorid中需要配合minSdkVersion>=21来使用。

在flutter中使用camera

camera插件为我们提供了一系列的功能来方便camera的使用。

camera的使用需要遵循下面的步骤,因为现在的手机可能会有多个摄像头,所以我们需要通过api获取到可以使用的摄像头列表。

接下来我们使用选中的摄像头,进行一些控制操作,然后需要使用相应的camera视图来展示相应的照相机图像.

最后调用摄像头相关的拍摄功能进行拍摄。

听起来好像挺复杂的,事实上只要遵照上面的顺序,一切都是非常简单的。

首先我们需要获取可用的摄像头列表,这个步骤是通过调用camera包中的availableCameras方法来实现的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Future<List<CameraDescription>> availableCameras() async {
  return CameraPlatform.instance.availableCameras();
}

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

CameraDescription是对camera的描述文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  const CameraDescription({
    required this.name,
    required this.lensDirection,
    required this.sensorOrientation,
  });

name是摄像头的名称,lensDirection是摄像头面对的方向,sensorOrientation是传感器的方向,也就说你的手机是正常放置,还是选择90度放置。

因为availableCameras是一个异步方法,所以我们需要把它包裹在一个异步方法中进行调用:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Future<void> main() async {
  // 保证所有的插件都加载完毕
  WidgetsFlutterBinding.ensureInitialized();

  //获取摄像头列表
  final cameras = await availableCameras();

  //拿到第一个摄像头
  final firstCamera = cameras.first;
  ....

这里我们拿到了第一个摄像头,注意,这里的firstCamera是一个CameraDescription对象。

因为模拟器上没有摄像头,如果你是在模拟器上运行上面的程序的话,将会抛出下面的异常:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
[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对象:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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来构建:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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中,如下所示:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
1 条评论
热度
最新
路过学习
路过学习
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
Flutter自制插件之r_scan二维码&条形码扫描(支持文件、url、内存、相机)
二维码作为信息的载体,广泛应用于我们生活的方方面面,例如:使用支付宝支付,二维码加好友,二维码推广等等,能举例的例子多不胜数,而如果你的应用支持二维码的扫描,用户和体验将会翻倍的增长,如果你是应用的开发者,欢迎来使用此二维码扫描插件!并希望能给予项目一个star,谢谢!项目地址:https://github.com/rhymelph/r_scan
rhyme_lph
2020/03/20
2.2K0
【Flutter】Flutter 拍照示例 ( 拍照并获取照片源码示例 | image_picker: ^0.5.2 版本 )
在 image_picker 插件主页 有关于该 Flutter 插件如何使用的代码示例 ;
韩曙亮
2023/03/29
1.1K0
【Flutter】Flutter 拍照示例 ( 拍照并获取照片源码示例 | image_picker: ^0.5.2 版本 )
Flutter中的相机拍照、相册选择图片、上传图片到服务器
需要注意的是,image_picker这个第三方组件只能是单选图片,如果大家有多选图片的需要,可以自己去pub.dev上面去搜索,本文只是针对“选择图片并上传”这一功能点做思路的介绍,所以对于各种第三方,都不会很详细地去讲怎么用。
拉维
2019/09/10
21.4K3
Flutter中的相机拍照、相册选择图片、上传图片到服务器
【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )
widthFactor ( 宽度因子 ) 和 heightFactor ( 高度因子 ) 用于控制该组件的宽高 , 类型为 double 浮点型 ;
韩曙亮
2023/03/29
8.6K0
【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )
Flutter中如何实现扫码
关于barcode_scan这个扫码组件,针对iOS和Android环境,都要进行对应的环境配置。iOS的配置相对简单,Android的配置就比较繁琐了。
拉维
2019/09/16
5.5K0
【 源码之间 - Flutter 】 FutureBuilder源码分析
现在回看_FutureBuilderState#initState中对_snapshot进行初始化时: 连接状态是none,数据是提供的初始数据,没有则为null
张风捷特烈
2020/05/18
2.1K0
【 源码之间 - Flutter 】 FutureBuilder源码分析
Flutter FutureBuilder 异步UI神器
那么当 Flutter 涉及到 Future 的时候,widget 该如何去构建呢?
Flutter笔记
2019/07/24
4.9K0
Flutter FutureBuilder 异步UI神器
【Flutter】Future 与 FutureBuilder 异步编程代码示例 ( FutureBuilder 构造函数设置 | 处理 Flutter 中文乱码 | 完整代码示例 )
FutureBuilder 本质是组件 : FutureBuilder 构造好以后 , 会自动执行异步操作 , 并返回 Widget 组件 , 因此 FutureBuilder 也是一个组件 , 在不同的状态下显示不同样式的组件 ;
韩曙亮
2023/03/29
2.6K0
【Flutter】Future 与 FutureBuilder 异步编程代码示例 ( FutureBuilder 构造函数设置 | 处理 Flutter 中文乱码 | 完整代码示例 )
Flutter中使用image_picker拍照并上传
https://pub.flutter-io.cn/packages/image_picker
越陌度阡
2021/01/29
6K0
【Flutter】FutureBuilder 异步编程 ( FutureBuilder 构造方法 | AsyncSnapshot 异步计算 )
FutureBuilder 将 异步操作 与 异步 UI 更新 结合在一起 ; 它可以将 异步操作 的结果 , 异步的 更新到 UI 界面中 ;
韩曙亮
2023/03/29
1K0
Flutter异步编程Future与FutureBuilder的实用技巧
在这篇文章中,将向大家分享异步编程Future与FutureBuilder的一些实用知识和技巧,首先会带着大家认识什么是Future?、Future的常见用法?、以及什么是FutureBuilder?,以及FutureBuilder常见的用法?等。
CrazyCodeBoy
2019/12/10
2.4K0
Flutter异步编程Future与FutureBuilder的实用技巧
基于STM32设计的门禁照相机
当前文章介绍基于STM32设计的门禁照相机,本项目提供了一种更加智能、安全、便捷的门禁解决方案。门禁照相机采用STM32F103ZET6 MCU作为主控芯片,配合2.8寸LCD显示屏、OV7725数字摄像头、SD卡和模拟门铃按键等外设模块,实现了摄像头画面实时显示、门铃触发拍照、图片存储等功能。
DS小龙哥
2023/07/25
4440
基于STM32设计的门禁照相机
flutter系列之:在flutter中使用媒体播放器
现在的app功能越来越强大,除了基本的图文之外,还需要各种各样的其他的功能,比如视频,和直播。
程序那些事
2023/03/28
1.8K0
Android开发笔记(一百八十一)使用CameraX拍照
常言道,眼睛是心灵的窗户,那么相机便是手机的窗户了,主打美颜相机功能的拍照手机大行其道,可见对于手机App来说,如何恰如其分地运用相机开发至关重要。 Android的SDK一开始就自带了相机工具Camera,从Android5.0开始又推出了升级版的camera2,然而不管是初代的Camera还是二代的camera2,编码过程都比较繁琐,对于新手而言有点艰深。为此谷歌公司在Jetpack库中集成了增强的相机库CameraX,想让相机编码(包括拍照和录像)变得更加方便。CameraX基于camera2开发,它提供一致且易用的API接口,还解决了设备兼容性问题,从而减少了编码工作量。 不管是拍照还是录像,都要在AndroidManifest.xml中添加相机权限,还要添加存储卡访问权限,如下所示:
aqi00
2022/03/09
1.9K0
Android开发笔记(一百八十一)使用CameraX拍照
基于 Flutter + 百度人工智能 开发出的一款测颜值的 App
正常情况下,一个页面中,通过 floatingActionButton 选项,默认只能渲染一个浮动按钮。如果需要渲染多个浮动按钮,可以通过 ButtonBar 控件来实现,代码示例如下:
徐建国
2021/08/02
2.6K0
Flutter | 定义一个通用的多功能网络请求 Widget
如果没有了解过,那么可以看我这篇文章:Flutter - FutureBuilder 异步UI神器。
Flutter笔记
2019/10/08
1.8K0
Flutter | 定义一个通用的多功能网络请求 Widget
Android平台相机接口的应用
第一部分、前述: Android作为Google移动互联网战略的重要组成部分,将进一步推进“随时随地为每个人提供信息”这一企业目标的实现。Google的目标是让移动通信不依赖于设备,甚至是平台。出于这个目的,Android将完善而不是替代Google长期以来推行的移动发展战略:通过与全球各地的手机制造商和移动运营商成为合作伙伴,开发既实用又有吸引力的移动服务,并推广这些产品。 Android平台的研发队伍阵容强大,包括Google、HTC(宏达电)、T-Mobile、高通、摩托罗拉、三星、LG以及中国移动在
庞小明
2018/03/07
1.7K0
Android平台相机接口的应用
【Flutter】Flutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )
一般使用 Scaffold 组件作为界面的根布局组件 , Scaffold 组件的 floatingActionButton 属性即可设置浮动按钮 , FloatingActionButton 组件 ;
韩曙亮
2023/03/29
1.8K0
【Flutter】Flutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )
android源码解析 ---- camera 照相机 摄像机
2.开启线程,启动硬件摄像头,调用CameraHolder.instance().open()得到一个android.hardwareCamera实
程序员小顾
2021/12/01
8570
Flutter 使用插件打开相册、相机「建议收藏」
需求: image_picker的使用,点击按钮底部弹出 相册、拍照选择框,实现具体功能
全栈程序员站长
2022/09/27
2.3K0
推荐阅读
Flutter自制插件之r_scan二维码&条形码扫描(支持文件、url、内存、相机)
2.2K0
【Flutter】Flutter 拍照示例 ( 拍照并获取照片源码示例 | image_picker: ^0.5.2 版本 )
1.1K0
Flutter中的相机拍照、相册选择图片、上传图片到服务器
21.4K3
【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )
8.6K0
Flutter中如何实现扫码
5.5K0
【 源码之间 - Flutter 】 FutureBuilder源码分析
2.1K0
Flutter FutureBuilder 异步UI神器
4.9K0
【Flutter】Future 与 FutureBuilder 异步编程代码示例 ( FutureBuilder 构造函数设置 | 处理 Flutter 中文乱码 | 完整代码示例 )
2.6K0
Flutter中使用image_picker拍照并上传
6K0
【Flutter】FutureBuilder 异步编程 ( FutureBuilder 构造方法 | AsyncSnapshot 异步计算 )
1K0
Flutter异步编程Future与FutureBuilder的实用技巧
2.4K0
基于STM32设计的门禁照相机
4440
flutter系列之:在flutter中使用媒体播放器
1.8K0
Android开发笔记(一百八十一)使用CameraX拍照
1.9K0
基于 Flutter + 百度人工智能 开发出的一款测颜值的 App
2.6K0
Flutter | 定义一个通用的多功能网络请求 Widget
1.8K0
Android平台相机接口的应用
1.7K0
【Flutter】Flutter 拍照示例 ( 浮动按钮及点击事件 | 底部显示按钮组件 | 手势检测器组件 | 拍照并获取当前拍摄照片 | 从相册中选择图片 )
1.8K0
android源码解析 ---- camera 照相机 摄像机
8570
Flutter 使用插件打开相册、相机「建议收藏」
2.3K0
相关推荐
Flutter自制插件之r_scan二维码&条形码扫描(支持文件、url、内存、相机)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验