Flutter MapController出现LateInitializationError问题求助

问题根源 #

1. 控制器未正确绑定：你在FlutterMap中新建了MapController()实例，而非使用类成员变量_mapController，导致成员变量的控制器从未与地图关联，内部状态未初始化，调用_mapController.camera时触发错误。
2. 过早访问控制器状态：在build阶段直接调用buildMarker()，此时地图可能尚未完成初始化，即使控制器绑定正确，camera属性也可能未就绪。

修复后的完整代码 #

import 'package:flutter/material.dart';
import 'dart:io';
import 'package:dio_cache_interceptor/dio_cache_interceptor.dart';
import 'package:dio_cache_interceptor_file_store/dio_cache_interceptor_file_store.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map_cache/flutter_map_cache.dart';
import 'package:latlong2/latlong.dart';
import 'package:path_provider/path_provider.dart';

class CityMap extends StatefulWidget {
  const CityMap({super.key});

  @override
  State<CityMap> createState() => _CityMapState();
}

class _CityMapState extends State<CityMap> with TickerProviderStateMixin {
  final Future<CacheStore> _cacheStoreFuture = _getCacheStore();
  late final MapController _mapController;
  final ValueNotifier<List<Marker>> _markersNotifier = ValueNotifier([]);
  List<LatLng> markertram = [const LatLng(51.502762, -0.113125)];

  static Future<CacheStore> _getCacheStore() async {
    final dir = await getTemporaryDirectory();
    return FileCacheStore('${dir.path}${Platform.pathSeparator}MapTiles');
  }

  @override
  void initState() {
    super.initState();
    _mapController = MapController();
    
    // 监听地图初始化完成，首次更新标记
    _mapController.mapReady.then((_) => _updateMarkers());
    
    // 监听地图位置变化，实时更新标记
    _mapController.addListener(() {
      if (_mapController.camera != null) {
        _updateMarkers();
      }
    });
  }

  void _updateMarkers() {
    List<Marker> markers = [];
    final bounds = _mapController.camera.visibleBounds;

    void createMarkers(List<LatLng> positions, String metroNumber) {
      final tramMarkers = positions
          .where((position) => bounds.contains(position))
          .map((position) => Marker(
                width: 20.0,
                height: 20.0,
                point: position,
                rotate: true,
                alignment: Alignment.center,
                child: GestureDetector(
                  onTap: () {},
                  child: Tooltip(
                    message: " Metro $metroNumber",
                    child: const Icon(Icons.tram_outlined),
                  ),
                ),
              ))
          .toList();
      markers.addAll(tramMarkers);
    }

    createMarkers(markertram, '2');
    _markersNotifier.value = markers;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<CacheStore>(
        future: _cacheStoreFuture,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final cacheStore = snapshot.data!;
            return Stack(
              children: [
                FlutterMap(
                  mapController: _mapController,
                  options: const MapOptions(
                    initialCenter: LatLng(51.515635, -0.092354),
                    initialZoom: 15.5,
                    maxZoom: 19.5,
                  ),
                  children: [
                    TileLayer(
                      urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                      tileProvider: CachedTileProvider(store: cacheStore),
                    ),
                    ValueListenableBuilder<List<Marker>>(
                      valueListenable: _markersNotifier,
                      builder: (context, markers, _) => MarkerLayer(markers: markers),
                    ),
                  ],
                ),
              ],
            );
          } else if (snapshot.hasError) {
            return Center(child: Text(snapshot.error.toString()));
          }
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

关键修复点 #

• 绑定正确的控制器：将FlutterMap的mapController指向类成员变量_mapController，确保控制器与地图实例关联。
• 延迟更新标记：通过mapController.mapReady监听地图初始化完成事件，确保控制器状态就绪后再计算可视范围。
• 实时更新标记：监听控制器的位置变化事件，地图移动时自动更新可视范围内的标记。
• 状态管理优化：使用ValueNotifier和ValueListenableBuilder管理标记列表，避免在build方法中直接依赖未就绪的控制器状态。

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