Add DropDownButton functionality to marker onTap in Google Maps - Flutter

Viewed 18

I want to add a drop down with list of strings to the onTap callback of a Google Maps Marker in Flutter.

I have a service that returns a single Marker which I add to the Map. Here is the MarkerService class that returns a single marker:

class MarkerService {
  Marker createMarkerFromPlace(Place place) {
    var markerId = place.name;
    const List<String> list = <String>['One', 'Two', 'Three', 'Four'];
    String dropdownValue = list.first;

    return Marker(
      markerId: MarkerId(markerId),
      draggable: false,
      infoWindow: InfoWindow(title: place.name, snippet: place.vicinity),
      position:
          LatLng(place.geometry.location.lat, place.geometry.location.lng),
      onTap: () {
        DropdownButton<String>(
          value: dropdownValue,
          icon: const Icon(Icons.arrow_downward),
          elevation: 16,
          style: const TextStyle(color: Colors.deepPurple),
          underline: Container(
            height: 2,
            color: Colors.deepPurpleAccent,
          ),
          onChanged: (String? value) {
            // This is called when the user selects an item.
            setState(() {
              dropdownValue = value!;
            });
          },
          items: list.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        );
      },
    );
  }
}

Naturally, I get an error on the setState() inside the onChanged:

The method 'setState' isn't defined for the type 'MarkerService'.

From what I understand, the method setState() belongs to a class that extends the State super class.

Any ideas on how to add a drop down menu functionality when I tap on the marker? All the tutorials online regarding DropDownButton in Flutter involve creating a different StatefulWidget.

0 Answers
Related