[google_maps_flutter] setMapStyle takes time to load, user is presented with blank map view

[kareldebedts]

I'm using a custom map style for the Google Maps Flutter package. Implemented with this code

  void _onMapCreated(GoogleMapController controller) {
    setState(() {
      _mapController = controller;
      _mapController.setMapStyle(_mapStyle).whenComplete(() {
        showMap = true;
      });
    });}

Current "problem" (more like an imperfection): the style is set after the map is loaded, so the user first gets a white screen, then the standard Google Maps style and after all that the custom style. This happens very fast, but there is a noticeable "flash". Especially when you're using a dark mode map style.

What I tried:

1. putting with Stack a black container on top of the google map widget (that' visible when showMap is set to false), so I can set the bool showMap to true if everything is loaded. Doesn't work because whenComplete get's fired when the setMapStyle is almost done (so there's still a flash). (tested in debug).

Solutions I could think of with the current possibilities: loading the google maps widget in the background on another screen, so when the user taps on the screen that has the google map widget, the map is already fully loaded.

I tried an approach to this with the cupertinotabbar and a statefull widget (with the google maps widget inside, that has keepAliveClientMixin enabled) and stack but the map kept reloading. Are there other approaches to this?

A nice feature would be:

Possibility to set a map style before the map is created

Or if the above feature is really difficult / almost impossible to implement:

Possibility to set a background color when the map isn't loaded yet (currently this color is white and has a big contrast with custom map style's that are darker).

[VladyslavBondarenko]

Reproduces with current google_maps_flutter 0.5.28+1.

complete code sample

``` import 'package:flutter/material.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; import 'package:flutter/services.dart' show rootBundle; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Google Maps Demo', home: MapSample(), ); } } class MapSample extends StatefulWidget { @override State createState() => MapSampleState(); } class MapSampleState extends State { GoogleMapController _controller; String _mapStyle; static final CameraPosition _kGooglePlex = CameraPosition( target: LatLng(37.42796133580664, -122.085749655962), zoom: 14.4746, ); @override void initState() { super.initState(); rootBundle.loadString('assets/map_style.txt').then((string) { _mapStyle = string; }); } @override Widget build(BuildContext context) { return new Scaffold( body: GoogleMap( initialCameraPosition: _kGooglePlex, onMapCreated: (GoogleMapController controller) { setState(() { _controller = controller; _controller.setMapStyle(_mapStyle); }); }, ), ); } } ``` [map_style.txt](https://github.com/flutter/flutter/files/4912915/map_style.txt)

flutter doctor -v

``` [✓] Flutter (Channel master, 1.20.0-8.0.pre.57, on Mac OS X 10.15.5 19F101, locale en-GB) • Flutter version 1.20.0-8.0.pre.57 at /Users/nevercode/dev/flutter • Framework revision 8bd2e6585b (2 days ago), 2020-07-11 12:15:19 -0700 • Engine revision 9b3e3410f0 • Dart version 2.9.0 (build 2.9.0-20.0.dev 06cb010247) [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3) • Android SDK at /Users/nevercode/Library/Android/sdk • Platform android-29, build-tools 29.0.3 • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 11.5) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 11.5, Build version 11E608c • CocoaPods version 1.9.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 4.0) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin version 47.1.2 • Dart plugin version 193.7361 • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593) [✓] VS Code (version 1.47.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.12.2 [✓] Connected device (5 available) • Redmi Note 7 (mobile) • 6345c469 • android-arm64 • Android 9 (API 28) • Android SDK built for x86 (mobile) • emulator-5554 • android-x86 • Android 10 (API 29) (emulator) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.5 19F101 • Web Server (web) • web-server • web-javascript • Flutter Tools • Chrome (web) • chrome • web-javascript • Google Chrome 83.0.4103.116 • No issues found! ```

flutter doctor -v

``` [✓] Flutter (Channel master, 1.21.0-6.0.pre.17, on Mac OS X 10.15.6 19G73, locale en-GB) • Flutter version 1.21.0-6.0.pre.17 at /Users/nevercode/dev/flutter • Framework revision e64fe11542 (11 hours ago), 2020-07-23 18:11:17 -0700 • Engine revision 626244a72c • Dart version 2.9.0 (build 2.9.0-21.0.dev a3815b6590) [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3) • Android SDK at /Users/nevercode/Library/Android/sdk • Platform android-29, build-tools 29.0.3 • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 11.6) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 11.6, Build version 11E708 • CocoaPods version 1.9.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 4.0) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin version 47.1.2 • Dart plugin version 193.7361 • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593) [✓] VS Code (version 1.47.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.12.2 [✓] Connected device (6 available) • Redmi Note 7 (mobile) • 6345c469 • android-arm64 • Android 9 (API 28) • Nevercode’s iPhone (mobile) • b668e524315069f3db3661ac11ff1f66afafebdb • ios • iOS 13.6 • iPhone 11 Pro Max (mobile) • 55C8466B-5367-492B-8EFE-EC45D980571F • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-6 (simulator) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.6 19G73 • Web Server (web) • web-server • web-javascript • Flutter Tools • Chrome (web) • chrome • web-javascript • Google Chrome 84.0.4147.89 • No issues found! ```

[kareldebedts]

@VladyslavBondarenko Just updated to that version and tested it on iOS 13. Looks the same. Do you have any recommendations to make it less noticeable?

[TahaTesser]

Issue reproduced on the latest google_maps_flutter: ^2.0.3

Preview

Android	iOS

code sample

```dart import 'package:flutter/material.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; import 'package:flutter/services.dart' show rootBundle; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Google Maps Demo', home: MapSample(), ); } } class MapSample extends StatefulWidget { @override State createState() => MapSampleState(); } class MapSampleState extends State { late GoogleMapController _controller; late String _mapStyle; static final CameraPosition _kGooglePlex = CameraPosition( target: LatLng(37.42796133580664, -122.085749655962), zoom: 14.4746, ); @override void initState() { super.initState(); rootBundle.loadString('assets/night_mode.json').then((string) { _mapStyle = string; }); } @override Widget build(BuildContext context) { return new Scaffold( body: GoogleMap( initialCameraPosition: _kGooglePlex, onMapCreated: (GoogleMapController controller) { setState(() { _controller = controller; _controller.setMapStyle(_mapStyle); }); }, ), ); } } ```

flutter doctor -v

```console [✓] Flutter (Channel stable, 2.0.6, on macOS 11.3 20E232 darwin-x64, locale en-GB) • Flutter version 2.0.6 at /Users/tahatesser/Code/flutter_stable • Framework revision 1d9032c7e1 (5 days ago), 2021-04-29 17:37:58 -0700 • Engine revision 05e680e202 • Dart version 2.12.3 [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) • Android SDK at /Volumes/Extreme/SDK • Platform android-30, build-tools 30.0.3 • ANDROID_HOME = /Volumes/Extreme/SDK • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer • Xcode 12.5, Build version 12E262 • CocoaPods version 1.10.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 4.1) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495) [✓] VS Code (version 1.55.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.22.0 [✓] Connected device (4 available) • Android SDK built for x86 (mobile) • emulator-5554 • android-x86 • Android 10 (API 29) (emulator) • iPhone 12 (mobile) • 4D5BE4C8-BF1D-46CD-B595-FD81A7140B52 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator) • macOS (desktop) • macos • darwin-x64 • macOS 11.3 20E232 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 90.0.4430.93 • No issues found! ``` ```console [✓] Flutter (Channel master, 2.3.0-1.0.pre.226, on macOS 11.3 20E232 darwin-x64, locale en-GB) • Flutter version 2.3.0-1.0.pre.226 at /Users/tahatesser/Code/flutter_master • Upstream repository https://github.com/flutter/flutter.git • Framework revision 51ca131e39 (10 hours ago), 2021-05-03 19:54:04 -0700 • Engine revision 378e4dbc41 • Dart version 2.14.0 (build 2.14.0-48.0.dev) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) • Android SDK at /Volumes/Extreme/SDK • Platform android-30, build-tools 30.0.3 • ANDROID_HOME = /Volumes/Extreme/SDK • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer • Xcode 12.5, Build version 12E262 • CocoaPods version 1.10.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 4.1) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495) [✓] IntelliJ IDEA Community Edition (version 2021.1.1) • IntelliJ at /Volumes/Extreme/IntelliJ IDEA CE.app • Flutter plugin version 55.1.5 • Dart plugin version 211.7233 [✓] VS Code (version 1.55.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.22.0 [✓] Connected device (4 available) • Android SDK built for x86 (mobile) • emulator-5554 • android-x86 • Android 10 (API 29) (emulator) • iPhone 12 (mobile) • 4D5BE4C8-BF1D-46CD-B595-FD81A7140B52 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator) • macOS (desktop) • macos • darwin-x64 • macOS 11.3 20E232 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 90.0.4430.93 • No issues found! ```

[mrylmz]

Is anyone maintaining the issue seams to me that there is no progress on it since one year and the issue is still existing.

[cto-leaps]

Indeed I still have the same issue. Anyone has found a workaround?

[bambinoua]

More than year passed from issue was initiated. Is there any news on this subject?

[atishdhu]

I use the following code as a work around to give the map time to load and provide a smooth transition using animatedOpacity to display it when loaded. Hope this can help you.

// Declare variables

GoogleMapController? _googleMapController;
final Future<bool> _mapFuture = Future.delayed(const Duration(milliseconds: 1000), () => true);
bool isMapVisible = false;

// Build map using FutureBuilder

FutureBuilder
(
  future: _mapFuture,
  builder: (context, AsyncSnapshot<bool> snapshot)
  {
    if(!snapshot.hasData)
    {
      return const Center
      (
        child: CircularProgressIndicator()
      );
    }

    return AnimatedOpacity
    (
      curve: Curves.fastOutSlowIn,
      opacity: isMapVisible ? 1.0 : 0,
      duration: const Duration(milliseconds: 600),
      child: GoogleMap
      (
        initialCameraPosition: _initialCameraPosition,
        onMapCreated: (controller) async
        {
          _googleMapController = controller;

          Future.delayed
          (
            const Duration(milliseconds: 550),
            () => setState
            (()
              {
                isMapVisible = true;
              }
            )
          );
        },
      ),
    );
  }
),

[Spyingaround]

@atishdhu Where do you declare isMapVisible bool? When I use this, my map stays blank after CircularProgressIndicator().

Edit: Nvm, figured the issue out.

When setting initial opacity: isMapVisible ? 1.0 : 0, the '0' is causing the issue. Issue mentioned here.

Instead use: opacity: isMapVisible ? 1.0 : 0.01.

[Keetz]

Still very relevant as of today.

Flutter 3.10.4 google_maps_flutter: ^2.3.0 google_maps_flutter_web: ^0.5.0+1

[CalsRanna]

Still. Even I use AnimatedOpacity, the first frame of google map still is normal style. If you use dark style, you can obviously see the flicker between white and dark!

[QiuGangGit]

How to solve the problem of blank map in dark mode?