Flutter Map自定义Marker报错：builder未定义、缺少child参数

错误原因分析 #

1. builder参数未定义：flutter_map库的Marker组件不存在builder参数，正确用于指定标记显示Widget的参数名是child。
2. 缺少必填child参数：Marker的child为必填项，必须传入对应的Widget才能完成组件初始化。

修正方案 #

将Marker中的builder替换为child，同时添加空值判断避免空指针异常，具体修改后的完整代码如下：

// Automatic FlutterFlow imports
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart' as ll;

class DynamicMap extends StatefulWidget {
  const DynamicMap({
    super.key,
    this.width,
    this.height,
    this.points,
    required this.accessToken,
    required this.startingPoint,
    required this.startingZoom,
  });

  final double? width;
  final double? height;
  final List<LatLng>? points;
  final String accessToken;
  final LatLng startingPoint;
  final double startingZoom;

  @override
  State<DynamicMap> createState() => _DynamicMapState();
}

class _DynamicMapState extends State<DynamicMap> {
  List<Marker> allMarkers = [];

  @override
  void initState() {
    super.initState();
    addMarkersToMap(widget.points);
  }

  void addMarkersToMap(List<LatLng>? points) {
    // 处理空列表情况，避免空指针异常
    if (points == null) return;
    
    for (LatLng point in points) {
      allMarkers.add(
        Marker(
          point: ll.LatLng(point.latitude, point.longitude),
          width: 12,
          height: 12,
          // 将builder替换为child，传入Icon作为标记显示组件
          child: Icon(
            Icons.location_pin,
            color: Colors.red,
            size: 12, // 匹配Marker的宽高，确保显示大小一致
          ),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    // 用SizedBox包裹FlutterMap，使组件支持自定义宽高
    return SizedBox(
      width: widget.width,
      height: widget.height,
      child: FlutterMap(
        options: MapOptions(
          center: ll.LatLng(
              widget.startingPoint.latitude, widget.startingPoint.longitude),
          zoom: widget.startingZoom,
        ),
        children: [
          TileLayer(
            urlTemplate:
                'https://api.mapbox.com/styles/v1/abdulsgilal579/clv6gzc4k007801o081vja3q9/tiles/256/{z}/{x}/{y}@2x?access_token=${widget.accessToken}',
          ),
          MarkerLayer(
            markers: allMarkers,
          ),
        ],
      ),
    );
  }
}

额外优化说明 #

• 增加points空值判断，避免传入空列表时触发运行时异常。
• 用SizedBox包裹FlutterMap，使组件能够响应DynamicMap的width和height参数，支持自定义尺寸。
• 设置Icon的size与Marker的width/height一致，确保标记显示大小符合预期。

内容的提问来源于stack exchange，提问作者Abdul Samad Gilal