Dark Mode in Huawei maps in flutter app

Part of HMS Core is the Map Kit SDK for map development, which helps developers create map-based applications. Instruction how to implement HMS Map Kit in your Flutter app you can find in this article or in official documentation.

But every modern application need to implement dark theme and for dark theme you need a dark styled map. In those article I’ll show you how to do this in Flutter app using Map Kit. I assume that you already have configured and working Huawei maps in your application.

This will be the final result

Whats first? Prepare map style json

To change the style of our map we will use setMapStyle method. As the documentation indicates, as a parameter we will pass a String variable, which will be JSON. What should contain that JSON and where we can find it? The simplest solution is to use mapstyle_night_hms.json file from official HMS Core Github repository with Map Kit Demo app.
The other way is to generate json using Huawei Map Style Creator. In that tool we can select one of three themes:
- standard,
- simple,
- night,
and define on which map zoom have to show: roads, landmarks and labels.

Simple map customization

We can also use More Options button and define huge amount of parameters. All available customization options are described here.

eg. We can fill all hospitals geometry with blue

After we prepared our dreamed map, just click finish, then copy generated json and save in file.

Generate the json map style by clicking Finish

Add json to app

To use the generated json, we need to add it to our app. Therefore we create a folder called assets in the main project directory. Then we copy to assets folder prepared json file. Next we declare this file in pubspec.yaml assets:

flutter:
  uses-material-design: true
  assets:
   - assets/mapstyle_night_hms.json

Then run flutter pub get command.

Define brightness in theme

To detect which theme is currently active in our system we need to set in our app Brightness for normal and dark themes

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark
      ),
      home: MapPage(),
    );
  }
}

Change map style in onMapCreated

Finally load night map style json file to string and set map style using HuaweiMapController

import 'package:flutter/services.dart';
// ...
Future<void> _onMapCreated(HuaweiMapController controller) async {
  mapController = controller;
  if (Theme.of(context).brightness == Brightness.dark) {
    var mapStyle = await rootBundle
        .loadString('assets/mapstyle_night_hms.json');
    await mapController.setMapStyle(mapStyle);
  }
}

Then we can run app with enabled dark mode theme and see result

Final result