Flutter: Pass new values to a Stateful widget and update the view onTap

Question

I have implemented google_maps_fltuter and I need to update the route on the map with new coordinates whenever the user clicks on a different route anywhere within the bordered rectangle (see the picture below). When the view is rendered initially, the map gets mounted with coordinates of the first route, but I also need to be able to show different routes.

I have a GestureDetector widget to allow this to happen but it doesn't trigger the RouteMap class whatsoever.

class _PlanJourney extends State<PlanJourney> {

...
  GestureDetector(
    onTap: () => RouteMap(from, to, routeCoordinates, i),
    child: Container(...)
  )
...

}

This is the class that creates the map based on the coordinates passed to the class.

class RouteMap extends StatefulWidget {
  final fromCoordinate;
  final toCoordinate;
  final routeCoordinates;
  final routeIndex;

  RouteMap(this.fromCoordinate, this.toCoordinate, this.routeCoordinates, this.routeIndex);

  @override
  _RouteMap createState() => _RouteMap(fromCoordinate, toCoordinate, routeCoordinates, routeIndex);
}

class _RouteMap extends State<RouteMap> {
  final fromCoordinate;
  final toCoordinate;
  final routeCoordinates;
  final routeIndex;

  _RouteMap(this.fromCoordinate, this.toCoordinate, this.routeCoordinates, this.routeIndex);
  
  Completer<GoogleMapController> _controller = Completer();
  GoogleMapController mapController;

  LatLng _setCenter() {
    return LatLng(double.parse(this.toCoordinate.split(',').toList()[1]), 
    double.parse(this.toCoordinate.split(',').toList()[0]));
  }

  final Set<Marker> _markers = {};
  Map<PolylineId, Polyline> _mapPolylines = {};
  int _polylineIdCounter = 1;

  void _onMapCreated(GoogleMapController controller) {
    _setCenter();

    mapController = controller;
    _controller.complete(controller);
  
    // the coordinates coming from the API are in LonLat format
    // Google map only accepts LatLon format so we have to swap the around
    LatLng latLng_1 = LatLng(double.parse(this.fromCoordinate.split(',').toList()[1]), 
    double.parse(this.fromCoordinate.split(',').toList()[0]));
    LatLng latLng_2 = LatLng(double.parse(this.toCoordinate.split(',').toList()[1]), 
    double.parse(this.toCoordinate.split(',').toList()[0]));

    setState(() {
      _markers.clear();
      addMarker(latLng_1, "Title", "description");
      addMarker(latLng_2, "Title", "description");
    });
    
    _add(routeIndex);

  }
...

Update

I have changed the code slightly but the problem remains there. SetState updates the value I need to send to the RouteMap class but the class itself does not update.

class _PlanJourney extends State<PlanJourney> {

...
  GestureDetector(
    onTap: () {
      setState(() {
        routeIndex = i; // this is the value I need to send to RouteMap class
        // print(routeIndex) -> the routeIndex changes
      });
  },
    child: Container(...) // *note the map is not in this container
  )
...

}

...
// the map is initially created here
  Container(
    margin: EdgeInsets.only(bottom: 10),
    height: 400,
    child: RouteMap(widget.from, widget.to, routeCoordinates[routeIndex], journeyData['routes'][routeIndex])
  )
...

...
class RouteMap extends StatefulWidget {
  final fromCoordinate;
  final toCoordinate;
  final routeCoordinates;
  final routeIndex;

  RouteMap(this.fromCoordinate, this.toCoordinate, this.routeCoordinates, this.routeIndex);

  @override
  _RouteMap createState() => _RouteMap();
}

class _RouteMap extends State<RouteMap> {
  Completer<GoogleMapController> _controller = Completer();
  GoogleMapController mapController;
  final Set<Marker> _markers = {};
  Map<PolylineId, Polyline> _mapPolylines = {};
  int _polylineIdCounter = 1;

...
}
  
...

The parent of `RouteMap` should be a `StatefulWidget` that holds the coordinates in its state and pass them to `RouteMap`. Whenever you tap the card, the coordinates from the state must be updated, then the `RouteMap` will also update. — Hugo Passos, Oct 16 '19 at 12:58
use Inkwell or Gesture Detector then Implement their onTap() method And Put your variables in setState() .when value change State Change Automatically — Hardik Bhalala, Oct 16 '19 at 13:49
@HugoPassos The setstate updates the value but the view does not change. Can you please have a look at the updated part I've added? Thank you — selected, Oct 21 '19 at 12:47

Pablo Barrera · Answer 1 · 2019-10-16T13:23:40.133

0

In the onTap() you could update the selected values, like this:

GestureDetector(
    onTap: () => setState(() {
      selectedFrom = from;
      selectedTo = to;
      selectedRuteCoordinates = routeCoordinates;
    }),
    child: Container(
      child: RouteMap(from, to, routeCoordinates, i),
    )
)

edited Oct 16 '19 at 13:23

answered Oct 16 '19 at 13:02

Pablo Barrera

10,387
3
28
49

The ```SetState``` updates the value but the view does not change. Can you please have a look at the updated part I've added? Thank you – selected Oct 21 '19 at 12:56

Flutter: Pass new values to a Stateful widget and update the view onTap

1 Answers1