Option to set map colorscheme

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.4.0
+
+* Add option to set a `colorScheme` for the map (system, light, dark)
+
 ## 1.3.0
 
 * Animate marker position changes instead of removing and re-adding

example/lib/map_ui.dart

@@ -43,6 +43,7 @@ class MapUiBodyState extends State<MapUiBody> {
   bool _myLocationButtonEnabled = true;
   MinMaxZoomPreference _minMaxZoomPreference = MinMaxZoomPreference.unbounded;
   MapType _mapType = MapType.standard;
+  MapColorScheme _colorScheme = MapColorScheme.system;
   bool _rotateGesturesEnabled = true;
   bool _scrollGesturesEnabled = true;
   bool _pitchGesturesEnabled = true;
@@ -98,6 +99,18 @@ class MapUiBodyState extends State<MapUiBody> {
     );
   }
 
+  Widget _colorSchemeCycler() {
+    final MapColorScheme nextScheme = MapColorScheme
+        .values[(_colorScheme.index + 1) % MapColorScheme.values.length];
+    return TextButton(
+        child: Text('change color scheme to $nextScheme'),
+        onPressed: () {
+          setState(() {
+            _colorScheme = nextScheme;
+          });
+        });
+  }
+
   Widget _rotateToggler() {
     return TextButton(
       child: Text('${_rotateGesturesEnabled ? 'disable' : 'enable'} rotate'),
@@ -170,6 +183,7 @@ class MapUiBodyState extends State<MapUiBody> {
   Widget build(BuildContext context) {
     final AppleMap appleMap = AppleMap(
       onMapCreated: onMapCreated,
+      colorScheme: _colorScheme,
       trackingMode: _trackingMode,
       initialCameraPosition: _kInitialPosition,
       compassEnabled: _compassEnabled,
@@ -207,6 +221,7 @@ class MapUiBodyState extends State<MapUiBody> {
                 children: <Widget>[
                   _compassToggler(),
                   _mapTypeCycler(),
+                  _colorSchemeCycler(),
                   _zoomBoundsToggler(),
                   _rotateToggler(),
                   _scrollToggler(),

ios/Classes/MapView/FlutterMapView.swift

@@ -144,6 +144,12 @@ class FlutterMapView: MKMapView, UIGestureRecognizerDelegate {
         if let mapType: Int = options["mapType"] as? Int {
             self.mapType = self.mapTypes[mapType]
         }
+
+        if let colorScheme: Int = options["colorScheme"] as? Int {
+            if #available(iOS 13.0, *) {
+                self.overrideUserInterfaceStyle = UIUserInterfaceStyle(rawValue: colorScheme) ?? .unspecified
+            }
+        }
 
         if let trafficEnabled: Bool = options["trafficEnabled"] as? Bool {
             if #available(iOS 9.0, *) {

lib/src/apple_map.dart

@@ -23,6 +23,7 @@ class AppleMap extends StatefulWidget {
     this.compassEnabled = true,
     this.trafficEnabled = false,
     this.mapType = MapType.standard,
+    this.colorScheme = MapColorScheme.system,
     this.minMaxZoomPreference = MinMaxZoomPreference.unbounded,
     this.trackingMode = TrackingMode.none,
     this.rotateGesturesEnabled = true,
@@ -59,6 +60,9 @@ class AppleMap extends StatefulWidget {
   /// Type of map tiles to be rendered.
   final MapType mapType;
 
+  /// Color scheme for the standard map to use.
+  final MapColorScheme colorScheme;
+
   /// The mode used to track the user location.
   final TrackingMode trackingMode;
 
@@ -188,7 +192,7 @@ class _AppleMapState extends State<AppleMap> {
   Widget build(BuildContext context) {
     final Map<String, dynamic> creationParams = <String, dynamic>{
       'initialCameraPosition': widget.initialCameraPosition._toMap(),
-      'options': _appleMapOptions.toMap(),
+      'options': _appleMapOptions.toMap(context: context),
       'annotationsToAdd': _serializeAnnotationSet(widget.annotations),
       'polylinesToAdd': _serializePolylineSet(widget.polylines),
       'polygonsToAdd': _serializePolygonSet(widget.polygons),
@@ -332,6 +336,7 @@ class _AppleMapOptions {
     this.compassEnabled,
     this.trafficEnabled,
     this.mapType,
+    this.colorScheme,
     this.minMaxZoomPreference,
     this.rotateGesturesEnabled,
     this.scrollGesturesEnabled,
@@ -349,6 +354,7 @@ class _AppleMapOptions {
       compassEnabled: map.compassEnabled,
       trafficEnabled: map.trafficEnabled,
       mapType: map.mapType,
+      colorScheme: map.colorScheme,
       minMaxZoomPreference: map.minMaxZoomPreference,
       rotateGesturesEnabled: map.rotateGesturesEnabled,
       scrollGesturesEnabled: map.scrollGesturesEnabled,
@@ -368,6 +374,8 @@ class _AppleMapOptions {
 
   final MapType? mapType;
 
+  final MapColorScheme? colorScheme;
+
   final MinMaxZoomPreference? minMaxZoomPreference;
 
   final bool? rotateGesturesEnabled;
@@ -388,7 +396,7 @@ class _AppleMapOptions {
 
   final bool? insetsLayoutMarginsFromSafeArea;
 
-  Map<String, dynamic> toMap() {
+  Map<String, dynamic> toMap({BuildContext? context}) {
     final Map<String, dynamic> optionsMap = <String, dynamic>{};
 
     void addIfNonNull(String fieldName, dynamic value) {
@@ -397,6 +405,19 @@ class _AppleMapOptions {
       }
     }
 
+    if (context != null) {
+      final systemScheme = Theme.of(context).brightness == Brightness.dark
+          ? MapColorScheme.dark
+          : MapColorScheme.light;
+      addIfNonNull(
+          'colorScheme',
+          colorScheme == MapColorScheme.system
+              ? systemScheme.index
+              : colorScheme?.index);
+    } else {
+      addIfNonNull('colorScheme', colorScheme?.index);
+    }
+
     addIfNonNull('compassEnabled', compassEnabled);
     addIfNonNull('trafficEnabled', trafficEnabled);
     addIfNonNull('mapType', mapType?.index);

lib/src/ui.dart

@@ -16,6 +16,14 @@ enum MapType {
   hybrid,
 }
 
+enum MapColorScheme {
+  /// Follow system style
+  system,
+
+  light,
+  dark,
+}
+
 enum TrackingMode {
   // the user's location is not followed
   none,

pubspec.yaml

@@ -1,6 +1,6 @@
 name: apple_maps_flutter
 description: This plugin uses the Flutter platform view to display an Apple Maps widget.
-version: 1.3.0
+version: 1.4.0
 homepage: https://luisthein.de
 repository: https://github.com/LuisThein/apple_maps_flutter
 issue_tracker: https://github.com/LuisThein/apple_maps_flutter/issues