颤动相机叠加
Flutter Camera Overlay
我一直在为即将进行的项目做一些研究,想在自定义 shape/semi-transparent img 后面渲染相机视图,以作为拍照时的指南。
有谁知道解释如何执行此操作的 flutter 相机插件或教程?
Flutter团队提供的flutter camera插件可以使用
https://pub.dartlang.org/packages/camera
然后像这样在 Stack Widget 中放置您的图像和相机视图:
return new Stack(
alignment: FractionalOffset.center,
children: <Widget>[
new Positioned.fill(
child: new AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: new CameraPreview(controller)),
),
new Positioned.fill(
child: new Opacity(
opacity: 0.3,
child: new Image.network(
'https://picsum.photos/3000/4000',
fit: BoxFit.fill,
),
),
),
],
);
请访问此 repo。此示例使用相机插件。
new AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: Container(
child: Stack(
children: <Widget>[
CameraPreview(controller),
Align(
alignment: Alignment.bottomCenter,
child: Container(
width: double.infinity,
height: 120.0,
padding: EdgeInsets.all(20.0),
color: Color.fromRGBO(00, 00, 00, 0.7),
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.all(Radius.circular(50.0)),
onTap: () {
_captureImage();
},
child: Container(
padding: EdgeInsets.all(4.0),
child: Image.asset(
'assets/images/ic_shutter_1.png',
width: 72.0,
height: 72.0,
),
),
),
),
),
Align(
alignment: Alignment.centerRight,
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.all(Radius.circular(50.0)),
onTap: () {
if (!_toggleCamera) {
onCameraSelected(widget.cameras[1]);
setState(() {
_toggleCamera = true;
});
} else {
onCameraSelected(widget.cameras[0]);
setState(() {
_toggleCamera = false;
});
}
},
child: Container(
padding: EdgeInsets.all(4.0),
child: Image.asset(
'assets/images/ic_switch_camera_3.png',
color: Colors.grey[200],
width: 42.0,
height: 42.0,
),
),
),
),
),
],
),
),
),
],
),
),
);
.
您现在也可以使用这个插件:
CamerAwesome
官方插件有一个比例错误,使叠加层的比例不佳。
此插件包含闪光灯、缩放、自动对焦...且无需初始化。
您可以在我的页面上查看完整代码
https://github.com/Prashantm111/flutter-camera-inscreen-app
我一直在为即将进行的项目做一些研究,想在自定义 shape/semi-transparent img 后面渲染相机视图,以作为拍照时的指南。
有谁知道解释如何执行此操作的 flutter 相机插件或教程?
Flutter团队提供的flutter camera插件可以使用
https://pub.dartlang.org/packages/camera
然后像这样在 Stack Widget 中放置您的图像和相机视图:
return new Stack(
alignment: FractionalOffset.center,
children: <Widget>[
new Positioned.fill(
child: new AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: new CameraPreview(controller)),
),
new Positioned.fill(
child: new Opacity(
opacity: 0.3,
child: new Image.network(
'https://picsum.photos/3000/4000',
fit: BoxFit.fill,
),
),
),
],
);
请访问此 repo。此示例使用相机插件。
new AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: Container(
child: Stack(
children: <Widget>[
CameraPreview(controller),
Align(
alignment: Alignment.bottomCenter,
child: Container(
width: double.infinity,
height: 120.0,
padding: EdgeInsets.all(20.0),
color: Color.fromRGBO(00, 00, 00, 0.7),
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.all(Radius.circular(50.0)),
onTap: () {
_captureImage();
},
child: Container(
padding: EdgeInsets.all(4.0),
child: Image.asset(
'assets/images/ic_shutter_1.png',
width: 72.0,
height: 72.0,
),
),
),
),
),
Align(
alignment: Alignment.centerRight,
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.all(Radius.circular(50.0)),
onTap: () {
if (!_toggleCamera) {
onCameraSelected(widget.cameras[1]);
setState(() {
_toggleCamera = true;
});
} else {
onCameraSelected(widget.cameras[0]);
setState(() {
_toggleCamera = false;
});
}
},
child: Container(
padding: EdgeInsets.all(4.0),
child: Image.asset(
'assets/images/ic_switch_camera_3.png',
color: Colors.grey[200],
width: 42.0,
height: 42.0,
),
),
),
),
),
],
),
),
),
],
),
),
);
您现在也可以使用这个插件: CamerAwesome
官方插件有一个比例错误,使叠加层的比例不佳。 此插件包含闪光灯、缩放、自动对焦...且无需初始化。
您可以在我的页面上查看完整代码
https://github.com/Prashantm111/flutter-camera-inscreen-app