共计 3051 个字符,预计需要花费 8 分钟才能阅读完成。
简介
在 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