Flutter Map on position change end

Question

I am using flutter_map to add a map to my project. I am able to work with it and use its options. But I want something that I did not find in flutter_map.

I want to listen to a position change and get the last position when the user stops touching the screen. Like the onTapUp or onLongPressUp in the GestureDetector widget.

There is onPositionChanged option in flutter_map but it gets called every time the position is changing, which is a lot. As soon as the user touched the screen, the onPositionChanged gets called until the user stops touching the screen. I can get the last position from this, but I want to call an API when the position changes to get the list of nearby cars. Calling API every time the onPositionChanged gets called is not good.

So I want to be able to call the API when the user finishes changing location (when he/she stops touching the screen).

Here is my flutter_map code:

     FlutterMap(
            key: Key('map'),
            mapController: main.mapController,

            options: MapOptions(
                center: LatLng(main.lat, main.long),
                zoom: 14,
                maxZoom: 18,
                minZoom: 10,
                onPositionChanged: (mapPosition, boolValue){
                  _lastposition = mapPosition.center;
                }),


            layers: [
              TileLayerOptions(
                errorImage: AssetImage('images/login_icon.png'),
                urlTemplate:
                    "https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png",
                // subdomains: ['a', 'b', 'c'],
                // subdomains: ['', '1', '2', '3', '4']
              ),
              MarkerLayerOptions(
                markers: main.markersStart +
                    main.markersDestination +
                    main.driverMarkers,
              ),
            ],
          ),

Any help would be appreciated, thanks :).

I work with google_map_flutter and it has onCameraIdle method, that return the position after user stop moving map — Amir
– Amir, Commented Jun 16, 2020 at 10:45
@veneno thanks. I want to upload the OSM map on my server. So I can not change the map to google maps. — Arash Mohammadi
– Arash Mohammadi, Commented Jun 17, 2020 at 7:05

ade-verd · Accepted Answer · 2021-09-22 16:55:08Z

10

The best solution I found was to add a listener on MapEventStream (check events here: map_events.dart)

  MapController mapController;
  StreamSubscription subscription;

  @override
  void initState() {
    mapController = MapController();

    mapController.onReady.then((_) {
      subscription = mapController.mapEventStream.listen((MapEvent mapEvent) {
        if (mapEvent is MapEventMoveStart) {
          print(DateTime.now().toString() + ' [MapEventMoveStart] START');
          // do something
        }
        if (mapEvent is MapEventMoveEnd) {
          print(DateTime.now().toString() + ' [MapEventMoveStart] END');
          // do something
        }
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    subscription.cancel();
    super.dispose();
  }

Many thanks to this post that helps me

answered Sep 22, 2021 at 16:55

ade-verd

1111 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pars · Accepted Answer · 2022-07-02 17:56:52Z

2

The easiest way I guess is to define a Timer like so:

Timer? timer;
....

And then inside onPositionChanged event, first reset it (actually reseting the old timer), then set it again. Using this, print is called only once and 1 second after changing position ends

FlutterMap(
  ...
  options: MapOptions(
    onPositionChanged: (MapPosition position, bool hasGesture) {
      timer?.cancel();

      timer = Timer(Duration(milliseconds: 1000), () {
        print(position);
      });
    }
  ),
  ...
)

answered Jul 2, 2022 at 17:56

Pars

5,31211 gold badges60 silver badges93 bronze badges

Comments

N Sivaram · Accepted Answer · 2020-07-04 15:09:07Z

-1

You can use a timer, which executes only after a one second delay.

onPositionChanged: (mapPosition, boolValue) {
              Timer(Duration(seconds: 1), () {}}

answered Jul 4, 2020 at 15:09

N Sivaram

3071 silver badge12 bronze badges

1 Comment

Simon Hutton Over a year ago

This will just throw the same multiple events a second later than they would have been thrown :-)

Collectives™ on Stack Overflow

Flutter Map on position change end

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related