Flutter中带实时相机流的Architect Widget导致AppBar不可见

核心原因 #

Android View作为原生视图，默认会渲染在Flutter Widget树的上层图层，因此会覆盖Flutter的AppBar等Widget。

解决方案 #

1. 用Stack+Positioned强制调整层级 #

把相机View放在Stack底层，AppBar放在上层，通过Positioned固定顶部位置，明确层级顺序：

Scaffold(
  body: Stack(
    children: [
      // 相机原生View置于底层
      AndroidView(
        viewType: 'your-camera-view-type',
        layoutDirection: TextDirection.ltr,
        creationParams: {},
        creationParamsCodec: const StandardMessageCodec(),
      ),
      // AppBar置于顶层，占据顶部区域
      Positioned(
        top: 0,
        left: 0,
        right: 0,
        child: AppBar(
          title: const Text('相机页面'),
          backgroundColor: Colors.blue,
          elevation: 4, // 可选：添加阴影增强层级感
        ),
      ),
      // 其他需要显示在相机上层的Widget都可以加在这里
    ],
  ),
);

2. 修改Android原生端视图插入层级 #

在实现PlatformView的Android代码中，将相机View插入到Flutter视图的最底部：

// Android端自定义PlatformView实现类
@Override
public View getView() {
    CameraView cameraView = new CameraView(context);
    // 将原生View插入到Flutter视图层级的最底部
    ((FlutterView) context).addView(cameraView, 0);
    return cameraView;
}

3. 替换为Flutter官方相机插件（优先推荐） #

如果业务场景允许，直接使用Flutter官方的camera插件，它基于Flutter Widget实现，完全不会有层级冲突问题：

CameraController? _cameraController;
List<CameraDescription>? _cameras;

@override
void initState() {
  super.initState();
  _initCamera();
}

Future<void> _initCamera() async {
  _cameras = await availableCameras();
  _cameraController = CameraController(
    _cameras![0],
    ResolutionPreset.medium,
  );
  await _cameraController!.initialize();
  if (mounted) setState(() {});
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('相机页面')),
    body: _cameraController?.value.isInitialized == true
        ? CameraPreview(_cameraController!)
        : const Center(child: CircularProgressIndicator()),
  );
}

@override
void dispose() {
  _cameraController?.dispose();
  super.dispose();
}

注意事项 #

• HTML/CSS的方式完全不适用于Flutter布局，属于无效操作，不要再尝试。
• 优先用Stack布局调整层级，无需修改原生代码，成本最低。

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