google-maps - Flutter -> 在后台加载谷歌地图

Question

我需要在后台加载 map ，因为当我第一次点击 maps.dart 的选项卡时， map 正在加载。它看起来很糟糕，所以我想使用 FutureBuilder 来显示 CircularProgressIndicator() 但我不知道该怎么做。
我知道如何使用列表来做到这一点，但在这种情况下......

此 maps.dart 代码:

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class Maps extends StatefulWidget {
  @override
  _MapsState createState() => _MapsState();
}

class _MapsState extends State<Maps> with AutomaticKeepAliveClientMixin {
  Completer<GoogleMapController> _controller = Completer();

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

  double zoomValue = 9.0;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      body: Stack(
        children: <Widget>[
          _buildGoogleMap(context),
          _zoomMinusFunction(),
          _zoomPlusFunction(),
        ],
      ),
    );
  }

  Widget _zoomMinusFunction() {
    return Align(
      alignment: Alignment.topLeft,
      child: IconButton(
          icon: Icon(FontAwesomeIcons.searchMinus, color: Color(0xff6200ee)),
          onPressed: () {
            zoomValue--;
            _minus(zoomValue);
          }),
    );
  }

  Widget _zoomPlusFunction() {
    return Align(
      alignment: Alignment.topRight,
      child: IconButton(
          icon: Icon(FontAwesomeIcons.searchPlus, color: Color(0xff6200ee)),
          onPressed: () {
            zoomValue++;
            _plus(zoomValue);
          }),
    );
  }

  Future<void> _minus(double zoomValue) async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(
        CameraPosition(target: LatLng(x, y), zoom: zoomValue)));
  }

  Future<void> _plus(double zoomValue) async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(
        CameraPosition(target: LatLng(x, y), zoom: zoomValue)));
  }

  Widget _buildGoogleMap(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      child: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition:
            CameraPosition(target: LatLng(x, y), zoom: 9),
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
        markers: {
          aaa,
          bbb,
        },
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

Marker aaa = Marker(
  markerId: MarkerId('aaa'),
  position: LatLng(x, y),
  infoWindow: InfoWindow(title: 'aaa', snippet: 'aaa'),
  icon: BitmapDescriptor.defaultMarkerWithHue(
    BitmapDescriptor.hueViolet,
  ),
);

Marker bbb = Marker(
  markerId: MarkerId('bbb'),
  position: LatLng(x, y),
  infoWindow:
      InfoWindow(title: 'bbb', snippet: 'bbb'),
  icon: BitmapDescriptor.defaultMarkerWithHue(
    BitmapDescriptor.hueViolet,
  ),
);

抱歉，我是 Flutter 的新手。

Answer 1

我知道这有点晚了，但如果它仍然有帮助，这就是我所做的。

_userLocation == null // If user location has not been found
                    ? Center(
                        // Display Progress Indicator
                        child: CircularProgressIndicator(
                          backgroundColor: UniColors.primaryColour[500],
                        ),
                      )
                    : GoogleMap(
                        // Show Campus Map
                        onMapCreated: _onMapCreated,
                        initialCameraPosition: // required parameter that sets the starting camera position. Camera position describes which part of the world you want the map to point at.
                            CameraPosition(
                                target: _userLocation,
                                zoom: defaultZoom,
                                tilt: 0.0),
                        scrollGesturesEnabled: true,
                        tiltGesturesEnabled: true,
                        trafficEnabled: false,
                        indoorViewEnabled: true,
                        compassEnabled: true,
                        rotateGesturesEnabled: true,
                        myLocationEnabled: true,
                        mapType: _currentMapType,
                        zoomGesturesEnabled: true,
                        cameraTargetBounds: new CameraTargetBounds(
                          new LatLngBounds(
                            northeast: uniCampusNE,
                            southwest: uniCampusSW,
                          ),
                        ),
                        minMaxZoomPreference:
                            new MinMaxZoomPreference(minZoom, maxZoom),
                      ),