Are you looking for to reinforce the look of the Google Maps integration inside your Flutter software, both by introducing a extra subtle look or aligning it seamlessly with the general theme of your software?
On this article, I’ll present the steps concerned in conducting this activity.
Creating your fashion
There are two approaches to styling Google Maps: using the Styling Wizard or using the Google Cloud Console. When choosing the Styling Wizard, the method includes importing the JSON data containing the styling necessities. Conversely, the Cloud Console offers a platform for creating and publishing kinds, seamlessly reflecting the modifications in your software.
Styling your google maps could be a considerably daunting activity as a result of multitude of customization choices obtainable.
Every function on the map may be customised by both altering the geometry or the label aspect which in flip is customised by fill or stroke properties, which even have separate customisation choices like color and saturation.
The silver lining on this context is that, as you undertake these customizations, the modifications are observable in real-time.
Utilizing the Styling Wizard
For the aim of this text, I will likely be exhibiting you how you can use the Styling Wizard. Considered one of my favorite issues about utilizing the Styling Wizard is that there are pre-customised themes obtainable so that you can use or construct on. For instance, if you wish to Google Maps to mix with the evening theme of your app. You may select both, Darkish, Evening or Aubergine.
As acknowledged earlier, the customisations you wish to do may be completed by altering the properties of both the geometry or label components. When you find yourself completed and satisfised with the outcomes, click on on End.
Afterwards, you need to see this above, the subsequent factor could be to repeat the JSON, that is basically the details about the customisations you’ve got made.
Importing the fashion
Subsequent factor could be to open your flutter mission, making certain you’ve got already added google_maps_flutter to your mission.
Subsequent create a file in your property listing in your flutter mission named map_styles.json and paste the JSON there.
Then add it to the pubspec.yaml file in your mission,
# The next part is restricted to Flutter packages.
flutter:
uses-material-design: true
property:
- property/map_style.json
After you’ve got have added it, run flutter pub get so flutter is conscious of this newly added asset.
Including the fashion
In your mission, this newly created fashion will likely be added to the GoogleMap widget.
First, could be to create a GoogleMapController variable that may present entry to the GoogleMap widget, it can allow you to do all type of enjoyable issues, like on this case including a customized map fashion.
import 'dart:async';
remaining Completer<GoogleMapController> _controller = Completer();
Subsequent, create a string that may retailer the trail to your map fashion. What I’d advocate is to load it forward of time earlier than we finally use, in initState().
import 'package deal:flutter/providers.dart';
late String _mapStyleString;
@override
void initState() {
rootBundle.loadString('property/map_styles/map_style.json').then((string) {
_mapStyleString = string;
});
tremendous.initState();
}
Subsequently, inside the GoogleMap widget, add the code answerable for configuring the personalized map fashion.
GoogleMap(
initialCameraPosition: const CameraPosition(
goal: LatLng(37.43296265331129, -122.08832357078792),
zoom: 19.151926040649414,
),
onMapCreated: (GoogleMapController controller) {
_controller.full(controller);
_controller.future.then((worth) {
worth.setMapStyle(_mapStyleString);
});
},
)
Within the offered code snippet, the GoogleMap fashion is ready inside the onMapCreated operate, guaranteeing that the map is created earlier than the fashion is utilized.
Lastly, run your code and you need to see your maps trying good.
For this text, I customised it to mix with the default theme when a brand new mission is created.
And that is the JSON under,
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#ebe3cd"
}
]
},
{
"elementType": "labels.textual content.fill",
"stylers": [
{
"color": "#523735"
}
]
},
{
"elementType": "labels.textual content.stroke",
"stylers": [
{
"color": "#f5f1e6"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#c9b2a6"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#c0d6dd"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.textual content.fill",
"stylers": [
{
"color": "#ae8f8f"
}
]
},
{
"featureType": "panorama.pure",
"elementType": "geometry",
"stylers": [
{
"color": "#dfc5ed"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#d9afdf"
}
]
},
{
"featureType": "poi",
"elementType": "labels.textual content.fill",
"stylers": [
{
"color": "#8a7b93"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#7b77b1"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.textual content.fill",
"stylers": [
{
"color": "#4e2f74"
}
]
},
{
"featureType": "highway",
"elementType": "geometry",
"stylers": [
{
"color": "#f5f1e6"
}
]
},
{
"featureType": "highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#3d6eff"
}
]
},
{
"featureType": "highway.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#faf7fd"
}
]
},
{
"featureType": "highway.freeway",
"elementType": "geometry",
"stylers": [
{
"color": "#a268f8"
}
]
},
{
"featureType": "highway.freeway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#b363e9"
}
]
},
{
"featureType": "highway.freeway.controlled_access",
"elementType": "geometry",
"stylers": [
{
"color": "#d158e9"
}
]
},
{
"featureType": "highway.freeway.controlled_access",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#8c57db"
}
]
},
{
"featureType": "highway.native",
"elementType": "labels.textual content.fill",
"stylers": [
{
"color": "#6e6482"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#c9afdf"
}
]
},
{
"featureType": "transit.line",
"elementType": "labels.textual content.fill",
"stylers": [
{
"color": "#83768f"
}
]
},
{
"featureType": "transit.line",
"elementType": "labels.textual content.stroke",
"stylers": [
{
"color": "#e5d0ec"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#dcafdf"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#bebad4"
}
]
},
{
"featureType": "water",
"elementType": "labels.textual content.fill",
"stylers": [
{
"color": "#968d9a"
}
]
}
]
So subsequent time your product designer brings to you a elaborate trying map, you should have nothing to fret about.
If you happen to discovered this useful, like and share and be happy to drop options and suggestions.
