I'm having trouble sending coordinates from a ListView (with ListTile to make them clickable) to my google maps. As of now, as a small test, I want the map to center on that location.

My List Screen:

class ListScreen extends StatelessWidget {
  final List<TrailModel> trails;
  ListScreen(this.trails);

  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Here are your trails"),
      ),
      body: TrailList(trails),
    );
  }
}

class TrailList extends StatelessWidget {
  final List<TrailModel> trails;

  TrailList(this.trails);

  Widget build(context) {
    return ListView.builder(
      itemCount: trails.length,
      itemBuilder: (context, int index) {
        Object myText = json.encode(trails[index].trails);
        List<dynamic> myText2 = json.decode(myText);
        return ListTile(
          contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
          leading: Container(
            decoration: BoxDecoration(
              border: Border.all(color:Colors.black),
            ),
            padding: EdgeInsets.all(20.0),
            margin: EdgeInsets.all(10.0),
            child: Text(myText2[index]['name']),
          ),
          onTap: () {

            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => new MapScreen(myText2[index]['latitude'], myText2[index]['longitude']),
              ),
            );
          },
        );
      },
    );
  }
}

My map screen:

class MapScreen extends StatefulWidget {
  final double latitude;
  final double longitude;
  MapScreen(this.latitude, this.longitude);

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

class _MapScreenState extends State<MapScreen> {
 GoogleMapController mapController;
 MapType _currentMapType = MapType.normal;

 //error here
 final LatLng _center = const LatLng(widget.latitude, widget.longitude);
 void _onMapCreated(GoogleMapController controller) {
   mapController = controller;
 }

 void _onMapTypeButtonPressed() {
   if (_currentMapType == MapType.normal) {
     mapController.updateMapOptions(
       GoogleMapOptions(mapType: MapType.satellite),
     );
     _currentMapType = MapType.satellite;
   } else {
     mapController.updateMapOptions(
       GoogleMapOptions(mapType: MapType.normal),
     );
     _currentMapType = MapType.normal;
   }
 }

 void _onAddMarkerButtonPressed() {
   mapController.addMarker(
     MarkerOptions(
       position: LatLng(
         mapController.cameraPosition.target.latitude,
         mapController.cameraPosition.target.longitude,
       ),
       infoWindowText: InfoWindowText('Random Place', '5 Star Rating'),
       icon: BitmapDescriptor.defaultMarker,
     ),
   );
 }

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       appBar: AppBar(
         title: Text("sample map"),
         backgroundColor: Colors.green[700],
       ),
       body: Stack(
         children: <Widget>[
           GoogleMap(
             onMapCreated: _onMapCreated,
             options: GoogleMapOptions(
               trackCameraPosition: true,
               cameraPosition: CameraPosition(
                 target: _center,
                 zoom: 11.0,
               ),
             ),
           ),
           Padding(
             padding: const EdgeInsets.all(16.0),
             child: Align(
               alignment: Alignment.topRight,
               child: Column(
                 children: <Widget>[
                   FloatingActionButton(
                     onPressed: _onMapTypeButtonPressed,
                     materialTapTargetSize: MaterialTapTargetSize.padded,
                     backgroundColor: Colors.green,
             heroTag: null,
                     child: const Icon(Icons.map, size: 36.0),

                   ),
                   const SizedBox(height: 16.0),
                   FloatingActionButton(
                     onPressed: _onAddMarkerButtonPressed,
                     materialTapTargetSize: MaterialTapTargetSize.padded,
                     backgroundColor: Colors.green,
             heroTag: null,
                     child: const Icon(Icons.add_location, size: 36.0),
                   ),
                 ],
               ),
             ),
           ),
         ],
       ),
     ),
   );
 }
}

My error messages: Evaluation of this constant expression throws an exception

If I remove const: Only static can be accessed in initializers

My initial attempt was just to pass into constructor like:

double latitude;
  double longitude;
  _MapScreenState(this.latitude, this.longitude);
 final LatLng _center = const LatLng(latitude, longitude);

but that was giving me those 2 errors, plus one more: arguments of a constant creation must be const expressions.

Please, any help would be much appreciated. Googling these messages seem too vague. Thanks in advance


Solution 1: thedarthcoder

Remove the const keyword and initialize _center the variable inside a constructor. You can do something like this:

_MapScreenState() {
  _center = LatLng(widget.latitude, widget.longitude);
}

You can refer this question for a more detailed explanation as to why this might work. Hope this helps!