Flutter应用出现类似烧屏的额外按钮覆盖层问题求助

你遇到的这种无法点击的按钮残影，是Google Maps Flutter插件在Android端常见的纹理渲染缓存冲突问题，通常是地图组件的渲染层与Flutter原生组件层叠加导致的异常绘制。以下是几种可行的解决方法：

方法1：禁用地图的手势识别器 #

在GoogleMap组件中添加gestureRecognizers参数，避免手势冲突引发的渲染异常：

GoogleMap(
  initialCameraPosition: const CameraPosition(target: curLoc, zoom: 10),
  markers: {const Marker(markerId: MarkerId("You"), position: curLoc)},
  // 添加这一行
  gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{},
)

方法2：调整布局对齐方式 #

将Column的mainAxisAlignment从MainAxisAlignment.center改为MainAxisAlignment.start，避免居中布局导致的组件重复绘制计算：

body: Column(
  mainAxisAlignment: MainAxisAlignment.start, // 修改这里
  children: [
    // 其余代码不变
  ],
)

如果需要保持居中效果，可以给地图容器添加margin来调整位置，而非依赖Column的居中属性。

方法3：更新Google Maps Flutter插件 #

检查pubspec.yaml中的google_maps_flutter版本，升级到最新稳定版，旧版本的部分渲染bug已被修复：

dependencies:
  google_maps_flutter: ^最新稳定版本号

执行flutter pub get完成依赖更新。

方法4：临时禁用硬件加速（Android端） #

若以上方法无效，可在Android的AndroidManifest.xml中禁用硬件加速（会影响性能，仅作为临时方案）：

<application
    android:name="io.flutter.app.FlutterApplication"
    android:label="你的应用名"
    android:icon="@mipmap/ic_launcher"
    android:hardwareAccelerated="false"> <!-- 添加这一行 -->
    <!-- 其余配置不变 -->
</application>

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