fluttermapsfluttermapflutterflowflutter-mapbox-gl

FlutterFlow Custom Widget Error - Implementing flutter_map package from pub.dev


Summary:
I'm attempting to build a custom widget in FlutterFlow using the flutter_map package from pub.dev. I think I'm getting pretty close to having the basic build working, but it is throwing an error that I don't understand how to fix (see the error below). This error is coming from the "layers" parameter within the custom widget near the bottom.

I've watched a few tutorials about implementing this package into a Flutter app, and they're able to use the "layers" parameter without issue. Here's an example: https://www.youtube.com/watch?v=hZwrcOTxDJI&t=391s

Plz help :') I am more than happy to supply further information if what I've provided here is insufficient.

Error: "The named parameter 'layers' isn't defined. Try correcting the name to an existing named parameter's name, or defining a named parameter with the name 'layers'."

Custom Code"

// 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, this.layers})
      : super(key: key);

  final double? width;
  final double? height;

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

class _FlutterMapTestState extends State<FlutterMapTest> {

  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      FlutterMap(
          mapController: MapController(),
          options: MapOptions(),
          children: [],
          layers: TileLayer(
            urlTemplate:
                "***",
            additionalOptions: {
              'accessToken':
                  "***",
            },
          ))
    ]);
  }
}

Pubspec Dependencies flutter_map: ^4.0.0

I tried creating a parameter called "layers", added that parameter into the code, but it didn't resolve anything. That was honestly a shot in the dark.


Solution

  • In case anyone comes across this in the future, the resolution for this was to remove the 'layers' parameter and move the TileLayer block inside of the 'children' parameter. I had to rewrite a bit of the code to do it, but I've managed to get a functioning dynamic Mapbox map built into my FlutterFlow app.

    Here's the updated code:

    class _FlutterMapWidgetState extends State<FlutterMapWidget> {
      @override
      Widget build(BuildContext context) {
        return Container(
            width: widget.width,
            height: widget.height,
            child: FlutterMap(
              mapController: MapController(),
              options: MapOptions(
                center: ltlng.LatLng(34.6, -92.4),
                zoom: 7.0,
                minZoom: 7.0,
              ),
              children: [
                TileLayer(
                  urlTemplate:
                      "***",
                  additionalOptions: {
                    'accessToken':
                        "***",
                  }, //additionalOptions
                ) //TileLayer
              ], //children
            ) //FlutterMap
            );
      }
    }