Flutter OSM map : can't see markers on user position

Viewed 379

I'm experimenting Flutter OSM map plugin. I followed examples on official github, it works properly but I can't see markers on user position. Location is well updated when user position changed, the map reflects the correct location.

Here's my code :

class MapScreenWidget extends StatefulWidget {

  MapScreenWidget({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _MapState();
}

class _MapState extends State<MapScreenWidget> {
  late MapController controller;

  @override
  void initState() {
    super.initState();
    controller = MapController(
      initMapWithUserPosition: true,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: appBar,
        body: Center(
          child: OSMFlutter(
            controller: controller,
            onLocationChanged: (GeoPoint point) {
              print('lat: ${point.latitude}, lon: ${point.longitude}');
            },
            trackMyPosition: true,
            initZoom: 16,
            minZoomLevel: 6,
            maxZoomLevel: 19,
            stepZoom: 1.0,
            userLocationMarker: UserLocationMaker(
              personMarker: MarkerIcon(
                icon: Icon(
                  Icons.location_history_rounded,
                  color: Colors.red,
                  size: 48,
                ),
              ),
              directionArrowMarker: MarkerIcon(
                icon: Icon(
                  Icons.double_arrow,
                  size: 48,
                ),
              ),
            ),
            markerOption: MarkerOption(
                defaultMarker: MarkerIcon(
                  icon: Icon(
                    Icons.person_pin_circle,
                    color: Colors.blue,
                    size: 56,
                  ),
                )),
          ),
        ));
  }
}

Environment :

  • flutter : 2.8.1
  • dart : 2.12
  • flutter_osm_map : 0.26.1
  • tested on Android API 29 & 30

Thanks

2 Answers

add a delay in onMapReady function like this

    onMapIsReady: (bool value) async {
    if (value) {
      Future.delayed(const Duration(seconds: 1), () async {
        await _mapController.currentLocation();
      });

    }
  },

Wrap the Center widget with a stack widget. That works for me

Related