flutter|flutter 自定义相机预览区域 按比例显示
【flutter|flutter 自定义相机预览区域 按比例显示】用的插件是flutter的camera ^0.5.8+11
公司需求是自定义一块拍照区域，裁剪部分摄像头预览区域，然后在原位置按正常显示（相机预览什么样就显示什么样）。
实现代码如下
/// 我们的UI设计预览跟控制块占比基本是1：1
var halfDeviceHeight = (DataBase.SCREEN_HEIGHT - MediaQuery.of(context).padding.top) / 2;
return Container(
width: double.infinity,
height: halfDeviceHeight,
child: ClipRect(
child: OverflowBox(
alignment: Alignment.center,
child: FittedBox(
fit: BoxFit.fitWidth,
child: Container(
width: DataBase.SCREEN_WIDTH,
height: DataBase.SCREEN_WIDTH / controller.value.aspectRatio,
child: CameraPreview(controller),
),
),
),
),
);
推荐阅读
- SpringBoot调用公共模块的自定义注解失效的解决
- python自定义封装带颜色的logging模块
- 列出所有自定义的function和view
- Flutter的ListView
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
- 自定义MyAdapter
- 运用flutter|运用flutter 构建一个发布版（release）APK
- Android自定义view实现圆环进度条效果
- Flutter自定义view|Flutter自定义view —— 闯关进度条
- js保留自定义小数点