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

1,000

Solution 1

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

I hope this answers your question.

Solution 2

Use a Stack

 Stack(
      children: <Widget>[
        Align(
          alignment:Alignment.center,//change this as you need
          child:MyGoogleMap()
         ),
        Align(
          alignment:Alignment.bottomCenter,//change this as you need
          child:FloatingActionButton(...)
         ),
        ],
      ),
Share:
1,000
uyhaW
Author by

uyhaW

Updated on December 20, 2022

Comments

  • uyhaW
    uyhaW over 1 year

    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?

  • uyhaW
    uyhaW almost 4 years
    it works well like what I want.. thank you very much for your help :D