How can I position multiple floating action button in Flutter. In particular I need one button in the bottom-right of the screen and another one in the top left.
How can I position multiple floating action button in Flutter. In particular I need one button in the bottom-right of the screen and another one in the top left.
Use Column and add two floating buttons inside it one is on the top left and the second one is on the bottom right
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Align(
alignment: Alignment.topLeft,
child: FloatingActionButton(
tooltip: 'Increment',
child: Icon(Icons.add),
),
),
Expanded(
child: Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
tooltip: 'Increment',
child: Icon(Icons.add),
),
),
)
],
),
you can use the stack() widget with positioned() in order to achieve this, for example:
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Maps and Floating Buttons Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Maps and Floating Buttons Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
GoogleMapController mapController;
var initialLocation =
CameraPosition(target: LatLng(-27.56, -58.58), zoom: 12);
void mapControllerCreated(GoogleMapController controller) {
mapController = controller;
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(children: <Widget>[
GoogleMap(
zoomControlsEnabled: false,
zoomGesturesEnabled: true,
mapToolbarEnabled: true,
compassEnabled: false,
myLocationButtonEnabled: true,
initialCameraPosition: initialLocation,
onMapCreated: mapControllerCreated,
onCameraMove: (position) {},
onCameraIdle: () {},
),
Positioned(
top: 50,
right: 20,
child: FloatingActionButton(
child: Icon(Icons.textsms_sharp),
backgroundColor: Colors.blue,
heroTag: 1,
onPressed: () {
//do something on press
},
)),
Positioned(
top: 50,
left: 20,
child: FloatingActionButton(
child: Icon(Icons.check),
backgroundColor: Colors.blue,
heroTag: 1,
onPressed: () {
//do something on press
},
)),
Positioned(
bottom: 50,
left: 20,
child: FloatingActionButton(
child: Icon(Icons.search),
backgroundColor: Colors.blue,
heroTag: 1,
onPressed: () {
//do something on press
},
),
)
]),
);
}
}
Check the below code and screenshot may be this will help you :
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: <Widget>[
Expanded(
child: Container(
width: MediaQuery.of(context).size.width,
color: Colors.red,
child: Align(
alignment: Alignment.topLeft,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
FloatingActionButton(onPressed: (){},child: Icon(Icons.add),),
],
),
),
)
),
Expanded(child: Container(
width: MediaQuery.of(context).size.width,
color: Colors.green,
child: Text('Center',textAlign: TextAlign.center,)
)),
Expanded(
child: Container(
width: MediaQuery.of(context).size.width,
color: Colors.red,
child: Align(
alignment: Alignment.bottomRight,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FloatingActionButton(onPressed: (){},child: Icon(Icons.add),),
],
),
),
)
),
],
),
);
}