如何在 Google Map Flutter 上显示小部件图标？答案

【问题标题】：How to display Widget Icon over Google Map Flutter?如何在 Google Map Flutter 上显示小部件图标？
【发布时间】：2020-01-17 22:58:11
【问题描述】：

在我的应用程序中有一个谷歌地图。我为此使用了google_maps_flutter。我想在右上角添加通知图标。我尝试使用 Stack，但 Google Map 覆盖了图标。

This is what I want

This is I achived after comment google map code

This is my current screen with below code

代码

Scaffold(
  resizeToAvoidBottomInset: true,
  body: Stack(
    children: <Widget>[
      Positioned(
          top: 60,
          right: 40,
          child: IconButton(
            icon: new Image.asset(UIData.notificationIcon),
            onPressed: () {},
          )),
      GoogleMap(
          myLocationEnabled: true,
          myLocationButtonEnabled: true,
          mapType: MapType.normal,
          initialCameraPosition: _kGooglePlex,
          markers: Set<Marker>.of(markers.values),
          onMapCreated: (controller) {
            if (this.mounted)
              setState(() {
                myController = controller;
              });
          })
    ],
  ),
);

【问题讨论】：

标签： google-maps flutter dart google-maps-flutter

【解决方案1】：

只需将铃铛图标移到谷歌地图下方，尝试替换下面的代码，它就可以完美地工作了

Scaffold(
  resizeToAvoidBottomInset: true,
  body: Stack(
children: <Widget>[
  GoogleMap(
      myLocationEnabled: true,
      myLocationButtonEnabled: true,
      mapType: MapType.normal,
      initialCameraPosition: _kGooglePlex,
      markers: Set<Marker>.of(markers.values),
      onMapCreated: (controller) {
        if (this.mounted)
          setState(() {
            myController = controller;
          });
      }),
  Positioned(
      top: 60,
      right: 40,
      child: IconButton(
        icon: new Image.asset(UIData.notificationIcon),
        onPressed: () {},
      )),
    ],
  ),
);

【讨论】：