Flutter使用MarkerLayer遇builder参数未定义错误求助

问题根源 #

flutter_map库的Marker组件没有builder这个命名参数，你错误地给Marker同时传入了builder和child，违反了组件的构造规则，导致编译器报错。

修复方案 #

移除builder参数，将GestureDetector直接作为Marker的child，把图标组件嵌套在GestureDetector内部即可。修改后的MarkerLayer部分代码如下：

MarkerLayer(
  markers: [
    Marker(
      width: 40.0,
      height: 40.0,
      point: LatLng(latitud, longitud),
      // 移除builder参数，将GestureDetector作为child
      child: GestureDetector(
        onTap: () {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return AlertDialog(
                title: const Text('Info acerca de la ubicación'),
                content: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min, // 避免Column撑满弹窗
                  children: [
                    Text('Nombre: $nombre'),
                    Text('Apellido: $apellido'),
                    Text('Ubicación: ${latitud.toString()}, ${longitud.toString()}'),
                  ],
                ),
                actions: [
                  TextButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: const Text('Cerrar'),
                  ),
                ],
              );
            },
          );
        },
        child: const Icon(
          Icons.location_pin,
          size: 40.0,
          color: Colors.red,
        ),
      ),
    ),
  ],
)

完整修正后的MapScreen类 #

class MapScreen extends StatelessWidget {
  final String nombre;
  final String apellido;
  final double latitud;
  final double longitud;

  const MapScreen({
    super.key,
    required this.nombre,
    required this.apellido,
    required this.latitud,
    required this.longitud,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('El mapa'),
      ),
      body: FlutterMap(
        options: MapOptions(
          initialCenter: LatLng(latitud, longitud),
          initialZoom: 13.0,
        ),
        children: [
          TileLayer(
            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            subdomains: const ['a', 'b', 'c'],
          ),
          MarkerLayer(
            markers: [
              Marker(
                width: 40.0,
                height: 40.0,
                point: LatLng(latitud, longitud),
                child: GestureDetector(
                  onTap: () {
                    showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return AlertDialog(
                          title: const Text('Info acerca de la ubicación'),
                          content: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Text('Nombre: $nombre'),
                              Text('Apellido: $apellido'),
                              Text('Ubicación: ${latitud.toString()}, ${longitud.toString()}'),
                            ],
                          ),
                          actions: [
                            TextButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              child: const Text('Cerrar'),
                            ),
                          ],
                        );
                      },
                    );
                  },
                  child: const Icon(
                    Icons.location_pin,
                    size: 40.0,
                    color: Colors.red,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

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