Flutter Camera插件预览问题求助：画面拉伸与底部导航栏遮挡

刚接触Flutter和Dart完全不用客气～我来帮你搞定这两个相机预览的问题：

问题1：预览画面被拉伸 #

这是因为CameraPreview默认会填充父组件空间，但相机传感器的分辨率比例和屏幕比例不匹配，导致画面被强制拉伸变形。

解决方案：
用AspectRatio组件包裹CameraPreview，通过controller.value.aspectRatio获取相机原生的宽高比，让预览画面保持正确比例，避免拉伸。

问题2：相机预览占满屏幕，无法显示BottomNavigationBar #

大概率是你把CameraPreview直接放在Scaffold的body中，没有设置合理的布局约束，导致它占据了整个屏幕空间，把底部导航栏挤出去了。

解决方案：
利用Scaffold自带的bottomNavigationBar属性放置底部导航栏，同时在body中用Column+Expanded组合约束CameraPreview的高度，让它只占据导航栏上方的可用空间。

修改后的完整代码示例 #

@override
Widget build(BuildContext context) {
  if (!_isReady) return const Center(child: CircularProgressIndicator());
  if (!controller.value.initialized) return const Center(child: Text("相机初始化失败"));

  return Scaffold(
    appBar: AppBar(title: const Text("相机预览")),
    // 用Scaffold专属属性放置底部导航栏，自动适配布局
    bottomNavigationBar: BottomNavigationBar(
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.camera), label: "拍照"),
        BottomNavigationBarItem(icon: Icon(Icons.photo), label: "相册"),
      ],
    ),
    body: Column(
      children: [
        // Expanded让相机预览占据导航栏上方的剩余空间
        Expanded(
          // AspectRatio保证预览画面比例正确，消除拉伸
          child: AspectRatio(
            aspectRatio: controller.value.aspectRatio,
            child: CameraPreview(controller),
          ),
        ),
        // 可按需添加预览下方的操作控件，比如拍照按钮
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 16.0),
          child: ElevatedButton(
            onPressed: () => _capturePhoto(),
            child: const Text("拍摄"),
          ),
        ),
      ],
    ),
  );
}

关键说明 #

• AspectRatio + controller.value.aspectRatio：严格匹配相机原生比例，彻底解决画面拉伸问题。
• Scaffold.bottomNavigationBar：系统提供的底部导航栏位置，自动避开系统状态栏和底部安全区，不会被body内容覆盖。
• Expanded：让CameraPreview自适应剩余空间，同时给底部控件和导航栏留出位置，布局更合理。

内容的提问来源于stack exchange，提问作者Thomas D. Frøysa