flutterbuttonmapsfloating-action-button

How to add floating action button that stick to another widget in flutter


I am trying to add floating action button that stick into another widget.. here is part of my code..

Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height / 2,
      child: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: init,
        markers: ...
        circles: ...,
        onMapCreated: (GoogleMapController controller) {
          _controller = controller;
        },
      ),
    );

I put my Maps screen inside Container... but I want to add floating action button that stick into my maps screen.. is it possible to do that?


Solution

  • You can use a Stack widget to achieve what you want.

    Check the code below. It works perfectly fine:

     // use a stack widget
            body: Stack(
              children: <Widget>[
                GoogleMap(
                  mapType: MapType.normal,
                  initialCameraPosition: init,
                  markers: ...
                  circles: ...,
                  onMapCreated: (GoogleMapController controller) {
                    _controller = controller;
                  },
                ),
                // align it to the bottom center, you can try different options too (e.g topLeft,centerLeft)
                Align(
                  alignment: Alignment.bottomRight,
                  // add your floating action button
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: Icon(Icons.map),
                  ),
                ),
              ],
            ),
    

    Output:

    enter image description here