title: Flutter: Pass new values to a Stateful widget and update the view onTap
body: <p>I have implemented <code>google_maps_fltuter</code> and I need to update the route on the map with <strong>new coordinates</strong> 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.</p>
  <p>I have a <code>GestureDetector</code> widget to allow this to happen but it doesn't trigger the <code>RouteMap</code> class whatsoever.</p>
  <pre><code>class _PlanJourney extends State&lt;PlanJourney&gt; {
  
  ...
    GestureDetector(
      onTap: () =&gt; RouteMap(from, to, routeCoordinates, i),
      child: Container(...)
    )
  ...
  
  }
  </code></pre>
  <p>This is the class that creates the map based on the coordinates passed to the class.</p>
  <pre><code>class RouteMap extends StatefulWidget {
    final fromCoordinate;
    final toCoordinate;
    final routeCoordinates;
    final routeIndex;
  
    RouteMap(this.fromCoordinate, this.toCoordinate, this.routeCoordinates, this.routeIndex);
  
    @override
    _RouteMap createState() =&gt; _RouteMap(fromCoordinate, toCoordinate, routeCoordinates, routeIndex);
  }
  
  class _RouteMap extends State&lt;RouteMap&gt; {
    final fromCoordinate;
    final toCoordinate;
    final routeCoordinates;
    final routeIndex;
  
    _RouteMap(this.fromCoordinate, this.toCoordinate, this.routeCoordinates, this.routeIndex);
    
    Completer&lt;GoogleMapController&gt; _controller = Completer();
    GoogleMapController mapController;
  
    LatLng _setCenter() {
      return LatLng(double.parse(this.toCoordinate.split(',').toList()[1]), 
      double.parse(this.toCoordinate.split(',').toList()[0]));
    }
  
    final Set&lt;Marker&gt; _markers = {};
    Map&lt;PolylineId, Polyline&gt; _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, &quot;Title&quot;, &quot;description&quot;);
        addMarker(latLng_2, &quot;Title&quot;, &quot;description&quot;);
      });
      
      _add(routeIndex);
  
    }
  ...
  </code></pre>
  <p><strong>Update</strong></p>
  <p>I have changed the code slightly but the problem remains there. <code>SetState</code> updates the value I need to send to the <code>RouteMap</code> class but the class itself does not update.</p>
  <pre><code>class _PlanJourney extends State&lt;PlanJourney&gt; {
  
  ...
    GestureDetector(
      onTap: () {
        setState(() {
          routeIndex = i; // this is the value I need to send to RouteMap class
          // print(routeIndex) -&gt; 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])
    )
  ...
  </code></pre>
  <pre><code>...
  class RouteMap extends StatefulWidget {
    final fromCoordinate;
    final toCoordinate;
    final routeCoordinates;
    final routeIndex;
  
    RouteMap(this.fromCoordinate, this.toCoordinate, this.routeCoordinates, this.routeIndex);
  
    @override
    _RouteMap createState() =&gt; _RouteMap();
  }
  
  class _RouteMap extends State&lt;RouteMap&gt; {
    Completer&lt;GoogleMapController&gt; _controller = Completer();
    GoogleMapController mapController;
    final Set&lt;Marker&gt; _markers = {};
    Map&lt;PolylineId, Polyline&gt; _mapPolylines = {};
    int _polylineIdCounter = 1;
  
  ...
  }
    
  ...
  </code></pre>
  <p><a href="https://i.stack.imgur.com/GcoQV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GcoQV.png" alt="enter image description here" /></a></p>