Google Maps Flutter: I am getting black screen before loading maps
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(),
],
),
);
} }
Zubair Rehman
Focused professional having excellent technical and communication skills, and offering 6 years of experience in the Computer industry. Specialize in thinking outside the box to find unique solutions. Developed 20+ apps in areas related to business, education, utility, social media, meditation and image processing.
Updated on December 13, 2022Comments
-
Zubair Rehman over 1 year
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!