Flutter 3.3.9中Stack嵌套GoogleMap时组件不可见但可交互问题求助

在Stack组件中嵌套GoogleMap后，上层所有Widget（如按钮、CustomInfoWindow）均不可见，但仍可正常交互（按钮点击能执行对应操作）。

• Flutter版本：3.3.9（stable）
• google_maps_flutter版本：2.2.2
• 此前基于Flutter2的相同代码逻辑可正常运行，甚至FloatingActionButton也出现同样的不可见问题。

截图：

• 地图加载时按钮可见：
• 地图创建完成后按钮消失：

Widget树代码：

Stack(
children: <Widget>[

  Container(
    child: Obx(
          () => GoogleMap(
        onTap: (position) {
          _customInfoWindowController.hideInfoWindow!();
        },
        onCameraMove: (position) {
          _customInfoWindowController.onCameraMove!();
        },
        onMapCreated: (GoogleMapController controller) {
          _customInfoWindowController.googleMapController =
              controller;
          newGoogleMapController = controller;
          updateCameraPosition(
              -8.466803395691676, 115.2199474850532, false);
        },
        zoomGesturesEnabled: false,
        myLocationEnabled: true,
        mapToolbarEnabled: true,
        zoomControlsEnabled: false,
        tiltGesturesEnabled: false,
        markers: Set<Marker>.of(markers.value),
        initialCameraPosition: _initialCameraPosition,
      ),
    ),
  ),


  Container(
    child: WidgetButton.btnStyle2(
        name: 'Update Camera Maps',
        action: () {
          updateCameraPosition(
              -8.371809235984502, 114.93838766787734, true);
        }),
  ),
  CustomInfoWindow(
    controller: _customInfoWindowController,
    height: 500,
    width: 500,
    offset: 50,
  ),
  ],
);

flutter doctor -v信息：

[√] Flutter (Channel stable, 3.3.9, on Microsoft Windows [Version 10.0.22621.900], locale en-ID)
    • Flutter version 3.3.9 on channel stable at C:\android\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (3 weeks ago), 2022-11-23 06:43:51 +0900
    • Engine revision 8f2221fbef
    • Dart version 2.18.5
    • DevTools version 2.15.0

Checking Android licenses is taking an unexpectedly long time...[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\User\AppData\Local\Android\sdk
    • Platform android-33, build-tools 30.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 2021.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[√] VS Code (version 1.73.1)
    • VS Code at C:\Users\User\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.54.0

这个问题源于Flutter 3.x版本中Android平台的platform view渲染模式变更：GoogleMap属于原生平台视图，默认优先级会覆盖Flutter渲染的Widget，即便它们在Stack的上层。以下是几种可行的解决方式：

方法1：全局修改Android渲染模式 #

在android/app/src/main/AndroidManifest.xml的<application>标签下添加元数据，强制使用旧版的surface渲染模式：

<meta-data android:name="flutter.platformviews.android_views_render_mode" android:value="surface"/>

该方式操作简单，全局生效，适合大多数场景。

方法2：单独处理GoogleMap的渲染层级 #

如果不想全局修改渲染模式，可以用AndroidViewSurface包裹GoogleMap（注意这是Flutter内部API，后续版本可能有变动）：

import 'package:flutter/src/platform_view/android/android_view_surface.dart';

// ...

Container(
  child: Obx(
    () => AndroidViewSurface(
      controller: AndroidViewController(
        viewType: 'plugins.flutter.io/google_maps',
        layoutDirection: TextDirection.ltr,
        creationParams: const {},
        creationParamsCodec: const StandardMessageCodec(),
      ),
      hitTestBehavior: PlatformViewHitTestBehavior.opaque,
      gestureRecognizers: const <Factory<OneSequenceGestureRecognizer>>{},
      child: GoogleMap(
        // 保留原GoogleMap的所有配置
        onTap: (position) {
          _customInfoWindowController.hideInfoWindow!();
        },
        onCameraMove: (position) {
          _customInfoWindowController.onCameraMove!();
        },
        onMapCreated: (GoogleMapController controller) {
          _customInfoWindowController.googleMapController = controller;
          newGoogleMapController = controller;
          updateCameraPosition(
              -8.466803395691676, 115.2199474850532, false);
        },
        zoomGesturesEnabled: false,
        myLocationEnabled: true,
        mapToolbarEnabled: true,
        zoomControlsEnabled: false,
        tiltGesturesEnabled: false,
        markers: Set<Marker>.of(markers.value),
        initialCameraPosition: _initialCameraPosition,
      ),
    ),
  ),
),

方法3：升级依赖版本 #

尝试将google_maps_flutter升级到最新稳定版，新版本可能已修复该层级问题。修改pubspec.yaml中的依赖：

google_maps_flutter: ^最新稳定版号

执行flutter pub get更新依赖后重新运行项目。

验证建议 #

优先尝试方法1，操作成本最低且见效快；若需精细化控制再考虑方法2；方法3适合长期维护项目，从依赖层面彻底解决问题。

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