FlutterFlow自定义Widget集成flutter_map时layers参数报错求助

问题根源 #

flutter_map 4.0.0版本进行了API重大调整，移除了FlutterMap构造函数中的layers参数，改用children参数传入地图图层（如TileLayer）。你参考的教程大概率基于3.x及以下旧版本，因此出现参数不匹配的错误。

修复步骤 #

1. 移除无效参数：删除FlutterMap中的layers参数，将TileLayer移入children列表（替换当前空的children: []）。
2. 清理无用自定义参数：你在FlutterMapTest中定义的widget.layers未实际使用，且类型不符合图层要求，直接删除即可。
3. 优化尺寸控制：将外层Column替换为SizedBox，利用你传入的width和height参数控制地图尺寸。

修复后的完整代码 #

// 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 ltlng;

class FlutterMapTest extends StatefulWidget {
  const FlutterMapTest({Key? key, this.width, this.height})
      : super(key: key);

  final double? width;
  final double? height;

  @override
  _FlutterMapTestState createState() => _FlutterMapTestState();
}

class _FlutterMapTestState extends State<FlutterMapTest> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: widget.width,
      height: widget.height,
      child: FlutterMap(
        mapController: MapController(),
        options: MapOptions(
          // 可添加初始中心点、缩放级别等配置
          // initialCenter: ltlng.LatLng(37.7749, -122.4194),
          // initialZoom: 13,
        ),
        children: [
          TileLayer(
            urlTemplate: "***",
            additionalOptions: {
              'accessToken': "***",
            },
          ),
          // 可在此添加更多图层，如MarkerLayer、PolygonLayer等
        ],
      ),
    );
  }
}

多图层添加示例 #

如果需要添加标记、多边形等图层，直接将对应Widget加入children列表即可：

children: [
  TileLayer(...),
  MarkerLayer(
    markers: [
      Marker(
        point: ltlng.LatLng(37.7749, -122.4194),
        builder: (ctx) => const Icon(Icons.location_pin, color: Colors.red),
      ),
    ],
  ),
]

内容的提问来源于stack exchange，提问作者Chase Starr-Kercheval