Detailed explanation of Flutter suspension button FloatingActionButton
- 2021-12-13 16:50:01
- OfStack
Directory 1, General Usage
2. Modify the position of the suspension button
3. Modify the float button size
4. Remove the suspension button to switch animation
Custom floating button style like 5 and 1
6. Thoroughly customize the floating button style
1. Common usage
2. Modify the position of the suspension button
3. Modify the float button size
4. Remove the suspension button to switch animation
Custom floating button style like 5 and 1
6. Thoroughly customize the floating button style
1. Common usage
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: (){
print(' Don't ~');
},
),
2. Modify the position of the suspension button
Inherit the FloatingActionButtonLocation class and override the corresponding method custom location
import 'package:flutter/material.dart';
class CustomFloatingActionButtonLocation extends FloatingActionButtonLocation {
FloatingActionButtonLocation location;
double offsetX; // X Offset of direction
double offsetY; // Y Offset of direction
CustomFloatingActionButtonLocation(this.location, this.offsetX, this.offsetY);
@override
Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
Offset offset = location.getOffset(scaffoldGeometry);
return Offset(offset.dx + offsetX, offset.dy + offsetY);
}
}
Use
floatingActionButtonLocation:CustomFloatingActionButtonLocation(
FloatingActionButtonLocation.endFloat, 0, -DpUtils.setWidth(20)),
3. Modify the float button size
floatingActionButton: SizedBox(
height: 100.0,
width: 100.0,
child:FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {},
),
),
4. Remove the suspension button to switch animation
Inherit the FloatingActionButtonAnimator class and override the corresponding method
import 'package:flutter/material.dart';
class NoScalingAnimation extends FloatingActionButtonAnimator{
double _x;
double _y;
@override
Offset getOffset({Offset begin, Offset end, double progress}) {
_x = begin.dx +(end.dx - begin.dx)*progress ;
_y = begin.dy +(end.dy - begin.dy)*progress;
return Offset(_x,_y);
}
@override
Animation<double> getRotationAnimation({Animation<double> parent}) {
return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
}
@override
Animation<double> getScaleAnimation({Animation<double> parent}) {
return Tween<double>(begin: 1.0, end: 1.0).animate(parent);
}
}
Use
floatingActionButtonAnimator: NoScalingAnimation(),
Custom floating button style like 5 and 1
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Image.asset(
"images/float_button.png",
width: DpUtils.setWidth(32),
height: DpUtils.setWidth(32),
),
Text(
" Floating button ",
style: TextStyle(fontWeight: FontWeight.bold,
fontSize: DpUtils.setSp(20), color: Colors.white),
),
],
),
),
elevation: 0,
onPressed: () {
_doSome();
},
backgroundColor: Colors.black,
heroTag: "floatHome",
),
)
)}
6. Thoroughly customize the floating button style
In fact, floatingActionButton can be directly passed into ordinary widget. So do what you should do
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Image.asset(
"images/home_icon_publishing.png",
width: DpUtils.setWidth(32),
height: DpUtils.setWidth(32),
),
Text(
" Send a theme ",
style: TextStyle(fontWeight: FontWeight.bold,
fontSize: DpUtils.setSp(20), color: Colors.white),
),
],
),
),
);
}