简介
在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中添加下面的权限信息:
NSCameraUsageDescription flutter需要用到你的照相机
在andorid中需要配合minSdkVersion>=21来使用。
在flutter中使用camera
camera插件为我们提供了一系列的功能来方便camera的使用。
camera的使用需要遵循下面的步骤,因为现在的手机可能会有多个摄像头,所以我们需要通过api获取到可以使用的摄像头列表。
接下来我们使用选中的摄像头,进行一些控制操作,然后需要使用相应的camera视图来展示相应的照相机图像.
最后调用摄像头相关的拍摄功能进行拍摄。
听起来好像挺复杂的,事实上只要遵照上面的顺序,一切都是非常简单的。
首先我们需要获取可用的摄像头列表,这个步骤是通过调用camera包中的availableCameras方法来实现的:
Future> 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 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 { late CameraController _controller; late Future _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( 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
标签:
- 【聚看点】flutter系列之:在flutter中使用相机拍摄照片
- 汝南县委宣传部开展“传承红色基因·清明祭英烈”主题活动 今日最新
- 焦点日报:西安烈士陵园回应刚献的花束被保洁收走:会反映处理
- 上海有全国首家“安乐死”医院?安宁疗护医生:太多人有误解 每日快报
- 足协取消欠薪俱乐部注册资格
- 今日要闻!日本暴发禽流感1740万只鸡被扑杀 被扑杀死禽已无处可埋
- 【世界报资讯】邮储银行北京分行携手北京如易行公司推出“1分钱乘地铁”活动 助力美好出行
- 《爱情而已》明白一件事,姐弟恋的关键在“弟”不在“姐”
- 北京市中小学科技教育示范学校名单出炉,241所学校入选
- “环西自行车挑战赛”首次落地中国,北京昌平站已开启报名 天天热讯
- 北京今明两天北风主场!周末气温明显回升
- 环球观点:中纪委典型案例!“硕鼠”徐宝义今日受审
- 今日热文:工行宿迁分行多举措提升制造业服务质效
- 环球快报:工行宿迁分行发挥科技赋能助力地方“四化”同步集成改革
- 农发行安顺分行:开展“赓续英烈精神汲取奋进力量”主题党日活动
- 【全球快播报】情系教育 爱心帮扶——苏陕联合举办“小海豚计划”公益活动
- 农发行浏阳市支行:履行政策性金融职能 走好普惠小微万里路|每日精选
- 世界头条:今日汇市观察:美元指数上涨至101.98 澳洲联储在8月份前可能都将按兵不动 五大货币最新技术分析
- 开发商回应山西晋城一小区外墙掉落:系大风影响
- 北京免费海葬排到2025年 海葬是将骨灰放进降解罐沉入水_焦点讯息
- 全球观焦点:厂家称蜂蜜罐两个生产日期系外包装重新处理启用
- 上百人进山挖黄金?官方:挖的是昆虫,当地人称为“土黄金”|天天快讯
- 普京:立场不同,俄美关系正处于严重危机之中
- 露营必备:青岛白啤遇上樱花季 满满仪式感 全球速看料
- 【世界时快讯】水乡周庄:撑一把油纸伞 走进烟雨江南的春天
- 快资讯丨嘉实基金李涛:以信创为突破口,构建循环经济产业链
- 香港理工大学人工智能机器人实验室正式启用 鼓励科研创新|动态焦点
- 天天快播:法源寺内丁香花如期绽放
- 世界看点:FIFA发布新一期国家队排名,国足下滑一位至第81位
- 世界新资讯:贾魏被查
- 1 【世界报资讯】邮储银行北京分行携手北京如易行公司推出“1分钱乘地铁”活动 助力美好出行
- 2 《爱情而已》明白一件事,姐弟恋的关键在“弟”不在“姐”
- 3 北京市中小学科技教育示范学校名单出炉,241所学校入选
- 4 “环西自行车挑战赛”首次落地中国,北京昌平站已开启报名 天天热讯
- 5 北京今明两天北风主场!周末气温明显回升
- 6 环球观点:中纪委典型案例!“硕鼠”徐宝义今日受审
- 7 露营必备:青岛白啤遇上樱花季 满满仪式感 全球速看料
- 8 【世界时快讯】水乡周庄:撑一把油纸伞 走进烟雨江南的春天
- 9 快资讯丨嘉实基金李涛:以信创为突破口,构建循环经济产业链
- 10 天天快播:法源寺内丁香花如期绽放