解决Flutter Map上下滚动白边及地图高度适配屏幕问题

1. 先确保地图容器占满屏幕高度 #

这是最基础的修复步骤，多数白边问题都源于地图未撑满可用屏幕空间：

• 若页面无AppBar，直接用SizedBox.expand或Expanded包裹FlutterMap，让它占满整个页面：

Scaffold(
  body: FlutterMap(
    options: MapOptions(initialCenter: LatLng(37.7749, -122.4194), initialZoom: 10),
    children: [
      TileLayer(
        urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        subdomains: const ['a', 'b', 'c'],
      ),
    ],
  ),
)

• 若页面有AppBar，需减去AppBar高度和状态栏高度，避免地图被遮挡或高度不足：

final screenHeight = MediaQuery.of(context).size.height;
final appBarHeight = AppBar().preferredSize.height;
final statusBarHeight = MediaQuery.of(context).padding.top;

Scaffold(
  appBar: AppBar(title: const Text('Map')),
  body: SizedBox(
    height: screenHeight - appBarHeight - statusBarHeight,
    child: FlutterMap(
      // 地图配置
    ),
  ),
)

2. 限制地图滚动边界，避免过度滚动露白 #

即使高度设置正确，若地图内容不足以填充屏幕（如缩放级别太低、地图范围过小），滚动时仍会出现白边。此时需要锁定地图的可滚动范围：

• 通过MapOptions的boundary属性，限定地图只能在指定经纬度范围内滚动：

MapOptions(
  initialCenter: LatLng(37.7749, -122.4194),
  initialZoom: 14,
  boundary: MapBoundary(
    bounds: LatLngBounds(
      southwest: const LatLng(37.70, -122.50),
      northeast: const LatLng(37.85, -122.35),
    ),
  ),
  interactiveFlags: InteractiveFlag.drag | InteractiveFlag.pinchZoom,
)

• 同时确保maxZoom匹配瓦片服务支持的最高级别（比如OpenStreetMap支持到19级），防止缩放后瓦片缺失露白：

TileLayer(
  urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  maxZoom: 19, // 与瓦片服务的最大级别对齐
)

3. 兜底方案：设置瓦片图层背景色 #

如果仍存在偶尔的白边（比如瓦片加载延迟），可以将TileLayer的backgroundColor设置为与瓦片底色一致的颜色，让白边不再明显：

TileLayer(
  urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  backgroundColor: const Color(0xffe0e0e0), // 匹配OpenStreetMap的灰色背景
)

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