flutter 自定义相机预览区域 按比例显示

2020-12-07  本文已影响0人  Andy_Sun

用的插件是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),
              ),
            ),
          ),
        ),
      );
上一篇下一篇

猜你喜欢

热点阅读