Chase Starr-Kercheval
Chase Starr-Kercheval

Reputation: 29

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.

Upvotes: 1

Views: 807

Answers (1)

Chase Starr-Kercheval
Chase Starr-Kercheval

Reputation: 29

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
        );
  }
}

Upvotes: 1

Related Questions