How to move floatingactionbutton like in the picture?
CodePudding user response:
You need to use floatingActionButtonLocation
on Scaffold
. While I can't find partial positioning method, you can create a custom class by extending FloatingActionButtonLocation
class CustomFabLoc extends FloatingActionButtonLocation {
@override
Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
return Offset(
scaffoldGeometry.scaffoldSize.width * .25, ///customize here
scaffoldGeometry.scaffoldSize.height - kToolbarHeight,
);
}
}
And use
return Scaffold(
floatingActionButtonLocation: CustomFabLoc(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
),
);
CodePudding user response:
Try this:
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, //specify the location of the FAB
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: "Centre FAB",
child: Container(
margin: EdgeInsets.all(15.0),
child: Icon(Icons.add),
),
elevation: 4.0,
),
Then you can add your bottom bar