Flutter中如何调整固定定位的AR Widget位置？

问题原因 #

ar_flutter_plugin 的 ARView 依赖原生平台的AR视图组件（如Android的SurfaceView、iOS的ARSCNView），这类组件默认脱离Flutter的Widget布局树，不受Flutter容器的尺寸和位置约束，因此会固定显示在屏幕左上角。

解决步骤 #

1. 让ARView匹配Flutter容器尺寸 #

在子Widget的onARViewCreated回调中，通过ARController设置AR视图的尺寸，使其与父容器的约束完全一致：

修改子Widget代码：

Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (context, constraints) {
      final containerWidth = constraints.maxWidth;
      final containerHeight = constraints.maxHeight;
      
      return SizedBox(
        width: containerWidth,
        height: containerHeight,
        child: Column(
          children: [
            Expanded(
              child: Column(children: [
                Expanded(
                  child: ARView(
                    onARViewCreated: (ARController controller) {
                      onARViewCreated(controller);
                      // 设置AR视图尺寸匹配父容器
                      controller.setSize(Size(containerWidth, containerHeight));
                    },
                    planeDetectionConfig: PlaneDetectionConfig.horizontalAndVertical,
                  ),
                ),
                Align(
                  alignment: Alignment(1, 1),
                  child: FloatingActionButton(onPressed: takePicture)
                )
              ]),
            ),
          ],
        ),
      );
    },
  );
}

2. 调整AR容器在父Widget中的位置 #

如果需要AR容器显示在AppBar下方的指定位置（比如居中），修改父Widget的Stack布局，通过Align组件定位AR容器：

修改父Widget中Stack的第一层：

Stack(
  children: [
    // 让AR容器居中显示在AppBar下方
    Align(
      alignment: Alignment.center,
      child: Container(
        width: 350,
        height: 350,
        child: ObjectsOnPlanesWidget(
          width: double.infinity,
          height: double.infinity,
          modelUrl: widget.modelUrl,
        ),
      ),
    ),
    // 以下原有叠加组件保持不变
    Align(
      alignment: AlignmentDirectional(-0.23, -0.92),
      child: Padding(
        padding: EdgeInsetsDirectional.fromSTEB(8, 24, 8, 24),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(
              width: 30,
              height: 30,
              decoration: BoxDecoration(
                color: FlutterFlowTheme.of(context).secondaryBackground,
                borderRadius: BorderRadius.circular(12),
              ),
              child: InkWell(
                onTap: () async {
                  Navigator.pop(context);
                },
                child: Icon(
                  Icons.chevron_left,
                  color: Colors.black,
                  size: 24,
                ),
              ),
            ),
            Text(
              'Try On',
              style: FlutterFlowTheme.of(context).bodyText1,
            ),
            Container(
              width: 30,
              height: 30,
              decoration: BoxDecoration(
                color: FlutterFlowTheme.of(context).secondaryBackground,
                borderRadius: BorderRadius.circular(12),
              ),
              child: Icon(
                Icons.share_outlined,
                color: Colors.black,
                size: 24,
              ),
            ),
          ],
        ),
      ),
    ),
    Align(
      alignment: AlignmentDirectional(0, 0.95),
      child: Container(
        width: 50,
        height: 50,
        decoration: BoxDecoration(
          color: FlutterFlowTheme.of(context).secondaryBackground,
          borderRadius: BorderRadius.circular(12),
        ),
        child: Icon(
          Icons.photo_camera,
          color: Colors.black,
          size: 24,
        ),
      ),
    ),
  ],
)

3. 修复原生视图层级问题（可选） #

如果ARView仍然覆盖其他Flutter组件，在ARView构造函数中切换Android渲染表面类型：

ARView(
  onARViewCreated: (controller) { ... },
  planeDetectionConfig: PlaneDetectionConfig.horizontalAndVertical,
  androidRenderSurface: AndroidRenderSurface.surfaceView,
)

额外说明 #

• 若setSize方法不存在（插件版本差异），可尝试通过controller.arSceneView（Android）或controller.sceneView（iOS）直接操作原生视图的布局参数。
• AR功能仅支持真机测试，模拟器无法正常运行。

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