Google Maps Flutter: I am getting black screen before loading maps

Question

I am getting black screen before loading maps, I tried creating a map widget on build() method and store it in a variable to use it whenever i open bottom sheet but i am still facing the same issue. Please have a look at the screenshot below:

https://user-images.githubusercontent.com/7915601/64229575-9d27e600-cf03-11e9-8619-9a7d1892d58d.gif

Code

  Widget _buildMap() {
    return Expanded(
      flex: 1,
      child: MapWidget(
        initialLocation: _center,
        zoomLevel: 11.0,
        locations: _jobStore.jobLocations,
        onMarkerTap: (id) {
          print('job id: $id');
          _jobStore.onItemClick(jobId: int.tryParse(id) ?? 0);
        },
      ),
    );
  }

Flutter doctor

macs-mbp:cubivue_app mac$ flutter doctor -v
[✓] Flutter (Channel stable, v1.7.8+hotfix.4, on Mac OS X 10.14.6 18G87, locale en-PK)
    • Flutter version 1.7.8+hotfix.4 at /Users/mac/Documents/flutter
    • Framework revision 20e59316b8 (7 weeks ago), 2019-07-18 20:04:33 -0700
    • Engine revision fee001c93f
    • Dart version 2.4.0


[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/mac/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 10.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.3, Build version 10G8
    • CocoaPods version 1.7.5

[✓] iOS tools - develop for iOS devices
    • ios-deploy 1.9.4

[✓] Android Studio (version 3.5)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 38.2.3
    • Dart plugin version 191.8423
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] Connected device (1 available)
    • BV5500Pro • E535B1ZM960411E2 • android-arm • Android 9 (API 28)

• No issues found!

Answer 1

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.

// 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;
              }
            )
          );
        },
      ),
    );
  }
),

Answer 2

Yeah, it a known bug dated from September 2019.

You can check its development here: https://github.com/flutter/flutter/issues/39797, and there is a workaround where you put some placeholder to be seen when waiting for map.

return Container(
  height: size.height,
  width: size.width,
  child: Stack(
    children: <Widget>[
      GoogleMap(
        initialCameraPosition: CameraPosition(
          target: LatLng(37.4220, -122.0841),
          zoom: 15,
        ),
        onMapCreated: (GoogleMapController controller) =>
            setState(() => _mapLoading = false),
      ),
      (_mapLoading)
          ? Container(
              height: size.height,
              width: size.width,
              color: Colors.grey[100],
              child: Center(
                child: CircularProgressIndicator(),
              ),
            )
          : Container(),
    ],
  ),
);

} }