Flutter实现全屏Camera预览画面拉伸、报NoSuchMethodError怎么办？

本次出现的运行报错、预览拉伸变形、模糊问题，由两类独立的逻辑错误导致：

空指针报错来源 #

报错NoSuchMethodError: The Method '[]' was called on Null的触发逻辑清晰：

• 状态类_CameraScreenState内部声明了空成员变量List cameras;，该变量初始值为null，且代码全程未对其赋值
• 全局main函数中初始化的同名顶层变量cameras，被状态类内部的同名成员变量遮蔽，从未被实际调用
• initState执行时直接调用cameras[0]获取列表第一个元素，此时cameras为null，自然触发空对象的索引方法调用错误
• 同时存在初始化时序漏洞：即使消除作用域遮蔽问题，若页面跳转时异步的相机列表获取流程尚未完成，cameras同样为null，触发相同报错

预览拉伸、模糊来源 #

• 缩放计算逻辑颠倒：原代码中Transform.scale的scale值为controller.value.aspectRatio / deviceRatio，计算结果会强制将相机预览拉伸至匹配屏幕比例，完全丢失相机预览的原始画面比例，最终出现明显变形
• 适配规则错误：原代码未遵循“无拉伸裁剪式全屏”的适配逻辑，直接缩放整个预览内容至屏幕尺寸，未保持画面原始比例
• 分辨率配置不合理：使用ResolutionPreset.max会直接拉满相机传感器最高分辨率，多数场景下该分辨率的画幅比例与手机屏幕比例不匹配，会导致画面被强制压缩，出现模糊感

第一步：修复空指针报错 #

• 删除状态类内部冗余的同名成员变量List cameras;，消除作用域遮蔽问题
• 抽离独立的相机控制器初始化方法，在调用前增加空值判断，确保相机列表完成初始化后再创建控制器
• 参考初始化实现代码：

@override
void initState() {
  super.initState();
  // 校验相机列表就绪状态
  if (cameras == null || cameras.isEmpty) {
    // 未就绪则异步等待相机列表加载完成
    availableCameras().then((loadedCameras) {
      cameras = loadedCameras;
      _initController(loadedCameras[0]);
    });
  } else {
    _initController(cameras[0]);
  }
}

void _initController(CameraDescription targetCamera) {
  controller = CameraController(
    targetCamera,
    ResolutionPreset.high, // 替换原max配置，平衡清晰度与屏幕适配性
    enableAudio: false,
  );
  controller.initialize().then((_) {
    if (!mounted) return;
    setState(() {});
  });
}

第二步：修复全屏预览的拉伸变形 #

• 替换原预览布局的缩放计算逻辑，遵循“无黑边、不变形、铺满屏幕”的适配规则：对比屏幕比例与相机预览的原始比例，计算最小缩放值让预览完全覆盖屏幕区域，超出屏幕边界的内容自然被裁剪，全程不修改画面原始比例
• 参考预览布局实现代码：

@override
Widget build(BuildContext context) {
  if (controller == null || !controller.value.isInitialized) {
    return const Scaffold(body: Center(child: CircularProgressIndicator()));
  }
  final screenSize = MediaQuery.of(context).size;
  final screenRatio = screenSize.width / screenSize.height;
  final previewRatio = controller.value.aspectRatio;

  // 计算适配全屏的缩放值，保持预览原始比例不变形
  double scaleFactor;
  if (previewRatio > screenRatio) {
    scaleFactor = previewRatio / screenRatio;
  } else {
    scaleFactor = screenRatio / previewRatio;
  }

  return Scaffold(
    body: Stack(
      fit: StackFit.expand, // 强制Stack铺满整个屏幕无留边
      children: [
        Center(
          child: Transform.scale(
            scale: scaleFactor,
            child: AspectRatio(
              aspectRatio: previewRatio,
              child: CameraPreview(controller),
            ),
          ),
        ),
        // 所有操作按钮、UI层可叠放在此处，不会被预览层遮挡
      ],
    ),
  );
}

• 效果说明：该适配方式下，相机预览会保持原始比例铺满全屏，不会出现横向/纵向拉伸，与按钮等UI元素对比不会出现变形；替换为ResolutionPreset.high后，预览清晰度将回归正常，消除模糊感。

内容的提问来源于stack exchange，提问作者KirtM9