Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to Change theme of google map according to app theme (Dark & Light)?

enter image description here

enter image description here

Change the view of map according to view of map in flutter app.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Check out this website https://mapstyle.withgoogle.com/ to choose the dark and light theme you would like to use. Click on “Finish” in order to generate the two JSON files that you will download.

import this file as an asset in your project. I recommend you isolate this file in a new folder and add it to the pubspec.yaml file.

assets/json/dark_mode_style.json

Add the following method to your map file,

@override
void initState() {
  super.initState();
  _loadMapStyles();
}

Future _loadMapStyles() async {
  _darkMapStyle  = await rootBundle.loadString('assets/json/dark_mode_style.json');
}

add style with the googleMapController like,

if (theme == Brightness.dark)
    controller.setMapStyle(_darkMapStyle);

Manage the following style according to your logic.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading