Is it possible to add opacity to the GoogleMap widget?

Question

I'm attempting to add opacity to the GoogleMap widget but not seeing any changes.

I've previously tried wrapping the entire widget with a Container then adding Opacity and GoogleMap as direct children but this did not work either.

The code below builds correctly, but adds no opacity:

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: Stack(
        children: <Widget>[
          Opacity(
            opacity: 0.5,
            child: GoogleMap(
              onMapCreated: _onMapCreated,
              myLocationButtonEnabled: false,
              initialCameraPosition: CameraPosition(
                target: _center,
                zoom: 15.0,
              ),
              indoorViewEnabled: false,
              mapType: MapType.normal,
              markers: _markers
            )
          ),
          ...
        ]
      )
    )
  );
}

I would expect the map to be opaque. Is this possible with GoogleMaps plugin or do they prevent styling like this?

score 2 · Accepted Answer · answered Jul 02 '19 at 08:47

The google_maps_flutter plugin renders a native GMSMapView on iOS and a native MapView on Android, so the alpha setting need to be implemented by the plugin itself to be able to access it.

Unfortunately you can't use Flutter's Opacity widget in the way you have attempted when rendering native components, since that widget only works on elements that are drawn on the canvas by Flutter itself.

So if you really want to achieve this, you'll have to implement this in Android and iOS yourself. In that case you can use the google_maps_flutter plugin as a reference.

Ah that's unfortunate, appreciate the response Tim. – William Jul 03 '19 at 02:06 — William, Jul 03 '19 at 02:06

Is it possible to add opacity to the GoogleMap widget?

1 Answers1