颤动谷歌地图在运行时更新地图样式

Posted 2023-02-23

【中文标题】颤动谷歌地图在运行时更新地图样式

【英文标题】：flutter google maps update map style in runtime

【发布时间】：2020-01-16 11:41:21

【问题描述】：

当我切换应用的主题时，我正在尝试以我的应用更新样式制作谷歌地图。

目前，我正在使用 'provider' 包来切换主题，并且运行良好，但是地图不会重建，这意味着样式不会改变。

我尝试创建一个应用构建器类并将页面包装在其中，然后在我更改主题（按下按钮时）时重新构建构建器，但这不起作用。

--

以下是我按下按钮切换主题时发生的代码

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

--

以下是我正在尝试更新的地图页面

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,
                ),
              ),

提前感谢您的帮助。

【问题讨论】：

有什么更新吗？

是的，我找到了使用 WidgetBindingObserver 并在 initState() 中添加实例的解决方案。然后，您可以在 WidgetBuild 的顶部添加一个 if 语句，检查应用中的亮模式或暗模式。

@LJ_Samurai，您能否添加您的解决方案作为答案以供将来参考？

【参考方案1】：

按照https://medium.com/flutterdevs/implement-dark-mode-in-flutter-using-provider-158925112bf9 进行暗模式操作，然后在您的 Map.dart 文件中使用 google 样式在主题更改时更新暗模式。

 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('');
      
                      
                 ));