flutter google maps update map style in runtime

Question

I am trying to make the google map in my app update style as I switch themes of the app.

Currently, I am using the 'provider' package to switch themes and it is working perfectly, however, the map will not rebuild meaning the style will not change.

I have tried making an app builder class and wrapping the page in that and then rebuilding the builder when I change theme (on button press) however this did not work.

--

The following is the code that happens when I press the button to switch themes

onPressed: () {
        _themeChanger.setTheme(
          Theme.of(context).brightness == Brightness.dark
              ? appTheme.lightTheme()
              : appTheme.darkTheme(),
        );
        AppBuilder.of(context).rebuild();
      },

--

And the following is the map page I am trying to make update

Future<void> onMapCreated(GoogleMapController _mapController) async {
mapController = _mapController;

Theme.of(context).brightness == Brightness.dark
    ? await mapController.setMapStyle(
        '[{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#969696"},{"saturation":36},{"lightness":40}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#000000"},{"lightness":16},{"visibility":"on"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"administrative.country","elementType":"geometry.stroke","stylers":[{"color":"#606060"}]},{"featureType":"administrative.locality","elementType":"labels.icon","stylers":[{"color":"#9e9e9e"},{"visibility":"simplified"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"color":"#8d8d8d"}]},{"featureType":"administrative.province","elementType":"geometry.stroke","stylers":[{"color":"#525252"}]},{"featureType":"landscape","stylers":[{"visibility":"on"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"landscape","elementType":"geometry.stroke","stylers":[{"color":"#636363"}]},{"featureType":"landscape","elementType":"labels.icon","stylers":[{"saturation":"-100"},{"lightness":"-54"}]},{"featureType":"poi","stylers":[{"saturation":"-100"},{"lightness":"0"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#101010"},{"lightness":21}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"saturation":"-89"},{"lightness":"-55"}]},{"featureType":"poi","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#453838"},{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#303030"},{"saturation":"-100"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"saturation":"-100"},{"lightness":"-51"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]')
    : await mapController.setMapStyle(
        '[{"elementType":"geometry","stylers":[{"color":"#f5f5f5"}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"elementType":"labels.text.fill","stylers":[{"color":"#616161"}]},{"elementType":"labels.text.stroke","stylers":[{"color":"#f5f5f5"}]},{"featureType":"administrative","elementType":"geometry","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":[{"color":"#bdbdbd"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#eeeeee"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#e5e5e5"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#ffffff"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"labels.text.fill","stylers":[{"color":"#757575"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#dadada"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#616161"}]},{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"color":"#e5e5e5"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"color":"#eeeeee"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#c9c9c9"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#9e9e9e"}]}]');}

--

return AppBuilder(
  builder: (context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Builder(
        builder: (context) {
          return Stack(
            children: <Widget>[
              GoogleMap(
                onCameraMove: this.onCameraMove,
                onMapCreated: this.onMapCreated,
                myLocationButtonEnabled: false,
                myLocationEnabled: true,
                compassEnabled: false,
                initialCameraPosition: CameraPosition(
                  target: LatLng(widget.viewModel.latitude,
                      widget.viewModel.longitude),
                  zoom: 17.0,
                ),
              ),

Thank you in advance for the help.

Yes I have found a solution using WidgetBindingObserver and adding an instance in the initState(){}. You can then just add an if statement at the top of your WidgetBuild checking for light or dark mode within your app. — Luca Jeevanjee, May 07 '20 at 16:16
@LJ_Samurai, Can you please add your solution as an answer for future reference? — Md. Asaduzzaman, May 17 '20 at 03:57

Sumesh Sheoran · Answer 1 · 2020-10-10T05:02:54.433

Follow this https://medium.com/flutterdevs/implement-dark-mode-in-flutter-using-provider-158925112bf9 for dark mode and then in your Map.dart file use google styles to update dark mode on the theme change.

 var controllerStyle=null;
 Widget build(BuildContext context) {

  final themeChange = Provider.of<DarkThemeProvider>(context);
  themeChange.darkTheme&&controllerStyle!=null? 

  controllerStyle.setMapStyle(Utils.mapStyles):
  themeChange.darkTheme==false&&controllerStyle!=null? 
  controllerStyle.setMapStyle('[]'):print('ds');


  
              return new Scaffold(
            body: GoogleMap(
              
              myLocationEnabled: true,
    
              compassEnabled: true,
   
              initialCameraPosition: initialLocation,
  
              onMapCreated: (GoogleMapController controller) {
    
                    controllerStyle=controller;
                    themeChange.darkTheme? 
                    controller.setMapStyle(Utils.mapStyles):print('');
      
                      }
                 ));
               }

flutter google maps update map style in runtime

1 Answers1

Linked