CODEWITHSUNDEEP
google-mapsflutterdartgoogle-maps-flutter
Gursewak Singh
Gursewak Singh

Reputation: 1968

How to display Widget Icon over Google Map Flutter?

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

Upvotes: 1

Views: 4191

Answers (1)

Kailash Chouhan
Kailash Chouhan

Reputation: 2386

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

Upvotes: 9

Related Questions