Why does centering a flutter_map not work?

Question

I am using flutter_map in a form in my Flutter app and centering the map does not work. The map just shows a piece of the ocean. That's because my fallback value (coordinates) is 0, 0. The marker then get's updated to the correct position from value[0] and value1, but the center isn't updated.

new FlutterMap(
            options: new MapOptions(
              // TODO: Center doesn't refresh
              // https://github.com/fleaflet/flutter_map/issues/10
              center: new latlong.LatLng(value[0], value[1]),
              zoom: 13.0,
            ),
            layers: [
              new TileLayerOptions(urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", subdomains: ['a', 'b', 'c']),
              new MarkerLayerOptions(
                markers: [
                  new Marker(
                    width: 20.0,
                    height: 20.0,
                    point: new latlong.LatLng(value[0], value[1]),
                    builder: (ctx) => new Container(
                      child: Icon(
                        Icons.location_on,
                        color: primaryColor,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),

I have no idea why center: new latlong.LatLng(value[0], value[1]), does not work. Can someone help me with that? Here is the Flutter package: https://pub.dev/packages/flutter_map

score 4 · Accepted Answer · answered Jan 06 '21 at 11:05

4

The parameter 'center' will be used only on start, it's not updated.

You must use a controller to move to your new position.

https://pub.dev/documentation/flutter_map/latest/flutter_map/MapController-class.html

Initialize your controller and add it to your FlutterMap

FlutterMap(controller:myController)

answered Jan 06 '21 at 11:05

BabC

1,044
5
18

Thanks for that, but the problem is that the map is used inside a stateless widget which is then used inside a stateful widget. The map is part of an InputCard class which supports many different inputs. I have no idea how it would be possible to implement the MapController here. – PlutoHDDev Jan 06 '21 at 11:21
I have tried using the MapController: https://hastebin.com/owawubelot.yaml, but I get this error: https://hastebin.com/wevodawuni.yaml – PlutoHDDev Jan 06 '21 at 11:23
You can set your controller as a static attributs of a UtilsClass. Not sure if it's recommanded but it might work. You can then use your controller for your map and also in your form to make it move. – BabC Jan 06 '21 at 12:27

Maciej Szakacz · Answer 2 · 2022-09-26T19:21:27.313

If you use BLoC (as a state management) here there is an example how you can do it without controller.

place your FlutterMap widget inside a your custom widget.
While calling this widget use key and wrap it with BlocBuilder. In result the FlutterMap widget will be rebuild with new center.

Example:

class _MapView extends StatelessWidget {
  const _MapView();

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<MapBloc, MapState>(
      builder: (context, state) {
        return Scaffold(
          body: MapWidget(
            key: Key('map${state.latitude}${state.longitude}'),
            latitude: state.latitude,
            longitude: state.longitude,
          ),
        );
      },
    );
  }
}


class MapWidget extends StatelessWidget {
  const MapWidget({
    super.key,
    required this.latitude,
    required this.longitude,
  });

  final double latitude;
  final double longitude;

  @override
  Widget build(BuildContext context) {
    final _searchingPoint = LatLng(
      latitude,
      longitude,
    );
    return FlutterMap(
      options: MapOptions(
        center: _searchingPoint,
        zoom: 11,
        keepAlive: true,
      ),
    );
  }
}

Source: GitHub

Why does centering a flutter_map not work?

2 Answers2