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
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(...)
),
],
),
Author by
uyhaW
Updated on December 20, 2022Comments
-
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 almost 4 yearsit works well like what I want.. thank you very much for your help :D