美文网首页
flutter 自定义相机预览区域 按比例显示

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

作者: Andy_Sun | 来源:发表于2020-12-07 16:36 被阅读0次

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

    相关文章

      网友评论

          本文标题:flutter 自定义相机预览区域 按比例显示

          本文链接:https://www.haomeiwen.com/subject/gmdtgktx.html