How to create a dialog box that automatically refreshes the current distance to a fixed position?

Question

I am trying to create a generic flutter function which presents a dialog box that automatically refreshes the current distance to a fixed position? When the dialog box is active, it will display the distance(in meters) from the current position to the fixed position(target) and automatically update as the location changes.

The code below accomplishes this for the instant the dialog box was activated, but I haven't been successful in refreshing the distance as the user moves. I have a suspicion it involves adding StatefulBuilder within the showDialog, but haven't found a solution.

Thanks in advance for any assistance.

_displayTargetDistance(BuildContext context, Position theTarget) async {
Geolocator geolocator = Geolocator();
geolocator.forceAndroidLocationManager;
Position position =  await geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.best);
double distanceInMeters = await Geolocator().distanceBetween(theTarget.latitude, theTarget.longitude, position.latitude, position.longitude);
String str = distanceInMeters.toString() + " Meters";
return showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: Text('Distance to Target'),
        content: Text(str),
        actions: <Widget>[
          new FlatButton(
            child: new Text('OK'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    });

}

score 0 · Answer 1 · answered Apr 26 '21 at 02:54

geolocator has a built in stream for this. I have built in my example below.

Depending on your requirements, using location services can drain the users battery pretty quickly - so I have also included an intervalDuration of 5 seconds.

Also, yes you do need to add state to the dialog using StatefulBuilder

import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';

_displayTargetDistance(BuildContext context, Position theTarget) async {
  Stream<Position> positionStream = Geolocator.getPositionStream(forceAndroidLocationManager: true, intervalDuration: Duration(seconds: 5));
  return showDialog(
      context: context,
      builder: (context) {
        return StatefulBuilder(
            builder: (BuildContext context, StateSetter setState) {
          return StreamBuilder<Position?>(
              stream: positionStream,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  Position currentPosition = snapshot.data!;
                    double distanceInMeters = Geolocator.distanceBetween(theTarget.latitude, theTarget.longitude, currentPosition.latitude, currentPosition.longitude);
                    String str = distanceInMeters.toString() + " Meters";
                  return AlertDialog(
                    title: Text('Distance to Target'),
                    content: Text(str),
                    actions: <Widget>[
                      new FlatButton(
                        child: new Text('OK'),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                    ],
                  );
                } else {
                  return Container();
                }
              });
        });
      });
}

Thanks Jackson, this got me there. I had to replace Geolocator.distanceBetween() with my own version. Compiler complained about async of the Geolocator function within StreamBuilder. Thanks again. — Tomato, May 01 '21 at 21:29

How to create a dialog box that automatically refreshes the current distance to a fixed position?

1 Answers1