How to display Widget Icon over Google Map Flutter?

3,207

Just shift bell icon below google map, try replacing below code, it's working my side perfectly

enter image description here

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: () {},
      )),
    ],
  ),
);
Share:
3,207
Gursewak Singh
Author by

Gursewak Singh

Updated on December 14, 2022

Comments

  • Gursewak Singh
    Gursewak Singh over 1 year

    In my application there is a google map. I used google_maps_flutter for it. I want to add notification icon on right corner. I tried with Stack but Google Map overlay the icon.

    This is what I want

    This is I achived after comment google map code

    This is my current screen with below code

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