我需要在所有ListTiles的尾随中放置一个动画的FloatingActionButton(例如下面的波纹管)。
对于动画FloatingActionButton,我按照本教程进行操作,以获取所需的FloatingActionButton的结构。
Animated FloatingActionButton example
问题是:FloatingActionButton溢出。如何解决此问题?使用FloatingActionButton或其他具有相同弹出效果的小部件。
我已经尝试过定位,堆叠,SingleChildScrollView等小部件。
如果我返回SingleChildScrollView,我会得到:
ListTile(
...
trailing:Stack(children: [AnimatedFAB()], ),
...
),
动画按钮代码为:
import 'package:flutter/material.dart';
class AnimatedFAB extends StatefulWidget {
@override
_AnimatedFABState createState() => _AnimatedFABState();
}
class _AnimatedFABState extends State<AnimatedFAB> with SingleTickerProviderStateMixin {
bool isOpened = false;
AnimationController _animationController;
Animation<Color> _buttonColor;
Animation<double> _animationIcon;
Animation<double> _translateButton;
Curve _curve = Curves.easeOut;
double _fabHeight = 56.0;
@override
void initState() {
_animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 500))
..addListener(() {
setState(() {});
});
_animationIcon = Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);
_buttonColor = ColorTween(begin: Colors.lightBlue, end: Colors.amber).animate(CurvedAnimation(parent: _animationController,
curve: Interval(0.00, 1.00, curve: Curves.linear)));
_translateButton = Tween<double> (begin: _fabHeight, end: -14.0)
.animate(CurvedAnimation(
parent: _animationController,
curve: Interval(0.0, 0.75, curve: _curve)
)
);
super.initState();
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
//Widgets
Widget buttonAdd() {
return Container(
child: FloatingActionButton(
onPressed: () {},
tooltip: "Add",
child: Icon(Icons.add),
),);
}
Widget buttonEdit() {
return Container(
child: FloatingActionButton(
onPressed: () {},
tooltip: "Edit",
child: Icon(Icons.edit),
),);
}
Widget buttonDelete() {
return Container(
child: FloatingActionButton(
onPressed: () {},
tooltip: "Delete",
child: Icon(Icons.delete),
),);
}
Widget buttonToggle() {
return Container(
child: FloatingActionButton(
backgroundColor: _buttonColor.value,
onPressed: animate,
tooltip: "Toggle",
child: AnimatedIcon(icon: AnimatedIcons.menu_close, progress: _animationIcon,),
),);
}
animate() {
if (!isOpened)
_animationController.forward();
else
_animationController.reverse();
isOpened = !isOpened;
}
@override
Widget build(BuildContext context) {
return Positioned(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Transform(
transform: Matrix4.translationValues(0.0, _translateButton.value*3.0, 0.0),
child: buttonAdd(),),
Transform(
transform: Matrix4.translationValues(0.0, _translateButton.value*2.0, 0.0),
child: buttonEdit(),),
Transform(
transform: Matrix4.translationValues(0.0, _translateButton.value, 0.0),
child: buttonDelete(),),
buttonToggle(),
],
),
);
}
}