google-maps - Flutter FutureBuilder 与 Google map 插件和自定义图标一起使用会使屏幕在启动时变黑

Question

我正在尝试在屏幕上添加带有自定义图标的谷歌地图小部件。 因此，在尝试渲染 map 之前，我需要使用 FutureBuilder 获取图标 BitmapDescriptor.fromAssetImage。 这个方法是一个异步方法，所以我把它扔进了 FutureBuilder 中，这样整个小部件就会等待，直到我的所有图标都被分配。

该应用程序可以运行，但问题是它的屏幕滑动速度很快但非常明显，导致该区域变黑。我有一个进度指示器，但这并不重要，黑屏总是出现。

@override
  Widget build(BuildContext context) {
    return Consumer <RestaurantsData>(
        builder: (context, _restaurantsData, __) => FutureBuilder<bool>(
          future: _prepareWidget(),
          builder: (BuildContext buildContext, AsyncSnapshot<bool> snapshot) {
            if (snapshot.connectionState == ConnectionState.done
                && snapshot.data
                && snapshot.hasData) {
              return googleMap(_restaurantsData);
            }
            logger.d("Map widget still processing");
            return Center(
              // Display Progress Indicator
              child: CircularProgressIndicator(
                backgroundColor: Colors.white,
              ),
            );
          })
    );
  }

Widget googleMap(RestaurantsData _restaurantsData){
    return Container(
        child: GoogleMap(
            mapType: MapType.normal,
            myLocationEnabled: true,
            myLocationButtonEnabled: true,
            mapToolbarEnabled: false,
            zoomGesturesEnabled: true,
            rotateGesturesEnabled: true,
            initialCameraPosition: CameraPosition(
                target: _defaultLatLng,
                zoom: _defaultZoom
            ),
            onMapCreated: (GoogleMapController controller) {
              _controller = controller;
            },
            onTap: (latLng) {
              if (bottomSheetCtrl != null) {
                bottomSheetCtrl.close();
                bottomSheetCtrl = null;
              }
            },
            markers: createRestaurantMarkers(_restaurantsData),
            gestureRecognizers: _gestureRecognizers
        )
    );
  }

  Set<Marker> createRestaurantMarkers(RestaurantsData restaurantsData) {
    return restaurantsData.getRestaurants()
        .map((item) =>
        Marker(
            position: item.latLng,
            markerId: MarkerId("${item.id}|${item.name}"),
            icon: getIconFor(item),
            onTap: () {
              logger.i("Marker clicked: ${item.id}, ${item.name}");
              showRestaurantDetails(context, item);
              restaurantsData.selectOne(item);
            }
        ))
        .toSet();
  }

准备小部件调用如下:

Future<bool> _prepareWidget() async {
    _markerIcon = await BitmapDescriptor.fromAssetImage(
        ImageConfiguration(devicePixelRatio: 2.5),
        marker
    );
    _selectedMarkerIcon = await BitmapDescriptor.fromAssetImage(
        ImageConfiguration(devicePixelRatio: 2.5),
        markerSelected
    );
    _disabledMarkerIcon = await BitmapDescriptor.fromAssetImage(
        ImageConfiguration(devicePixelRatio: 2.5),
        disabledMarker
    );
    _disabledSelectedMarkerIcon = await BitmapDescriptor.fromAssetImage(
        ImageConfiguration(devicePixelRatio: 2.5),
        disabledMarkerSelected
    );

    return Future.value(_markerIcon != null
        && _selectedMarkerIcon != null
        && _disabledMarkerIcon != null
        && _disabledSelectedMarkerIcon != null
    );
  }

我有 4 个图标，它们始终是静态的，并且从应用程序启动时就可用。

关于如何解决这个问题有什么想法吗？ 我对 flutter 相当陌生，所以这个问题可能是因为我做错了一些事情。

Answer 1

我通过使用 FuturBuilder 构建 Future 并将其作为祖先小部件中的 Provider 传递来修复了闪烁问题。它在所有主要小部件之前构建，并且仅构建一次。

在父小部件中:

return MultiProvider(
        providers: [
          FutureProvider<MapMarkerProvider>(
              lazy: false,
              create: (_) async => MapMarkerProvider().loadMarkers() //<- Async Action loading icons.
          ),
        ],
        child: Scaffold(
            appBar: new EmptyAppBar(),
            body: Container(
                ....
            )
        )
    );
  }