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

Question

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

目前，我正在使用 '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,
                ),
              ),

提前感谢您的帮助。

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