Flutter 颤振-ListTile中的浮动ActionButton

我需要在所有ListTiles的尾随中放置一个动画floatingAction按钮（如下图所示）

对于动画FloatingActionButton，我按照本教程获得了所需的FloatingActionButton的结构

问题是：FloatingAction按钮溢出。如何解决此问题？使用FloatingActionButton或其他小部件复制相同的弹出效果

我已经尝试过定位、堆栈、SingleChildScrollView等小部件

如果我返回SingleChildScrollView，我会得到以下结果：

动画按钮代码为：

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(),
        ],
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
类AnimatedFAB扩展StatefulWidget{
@凌驾
_AnimatedFABState createState（）=>\u AnimatedFABState（）；
}
类_AnimatedFABState使用SingleTickerProviderStateMixin扩展状态{
bool-isOpened=false；
AnimationController _AnimationController；
动画按钮颜色；
动画animationIcon；
动画翻译按钮；
曲线_Curve=Curves.easeOut；
双倍高度=56.0；
@凌驾
void initState（）{
_animationController=
AnimationController（vsync:this，duration:duration（毫秒：500））
…addListener（（）{
setState（（）{}）；
});
_animationIcon=Tween（开始：0.0，结束：1.0）。设置动画（\u animationController）；
_buttonColor=ColorTween（开始：Colors.lightBlue，结束：Colors.amber）。动画（曲线动画）（父项：_animationController，
曲线：区间（0.00，1.00，曲线：曲线.线性））；
_translateButton=Tween（开始：高度，结束：-14.0）
.动画（曲线动画）(
父项：_animationController，
曲线：间隔（0.0,0.75，曲线：_曲线）
)
);
super.initState（）；
}
@凌驾
无效处置（）{
_animationController.dispose（）；
super.dispose（）；
}
//小部件
Widget buttonad（）{
返回容器(
子：浮动操作按钮(
按下：（）{}，
工具提示：“添加”，
子：图标（Icons.add），
),);
}
小部件buttonEdit（）{
返回容器(
子：浮动操作按钮(
按下：（）{}，
工具提示：“编辑”，
子：图标（Icons.edit），
),);
}
小部件按钮删除（）{
返回容器(
子：浮动操作按钮(
按下：（）{}，
工具提示：“删除”，
子：图标（Icons.delete），
),);
}
小部件按钮切换（）{
返回容器(
子：浮动操作按钮(
背景颜色：_buttonColor.value，
onPressed：设置动画，
工具提示：“切换”，
子项：animateDictions（图标：animateDictions.menu\u关闭，进度：\u animationIcon，），
),);
}
制作动画（）{
如果（！等间距）
_animationController.forward（）；
其他的
_animationController.reverse（）；
等间距=！等间距；
}
@凌驾
小部件构建（构建上下文）{
返回定位(
子：列(
mainAxisAlignment:mainAxisAlignment.end，
儿童：[
转化(
转换：矩阵4.translationValues（0.0，_translateButton.value*3.0,0.0），
子项：buttonad（），），
转化(
转换：矩阵4.translationValues（0.0，_translateButton.value*2.0,0.0），
子项：buttonEdit（），），
转化(
转换：矩阵4.translationValues（0.0，_translateButton.value，0.0），
子项：buttonDelete（），），
按钮切换（），
],
),
);
}
}

不要这样做。材料不是这样工作的。有一个晶圆厂就这样！如果你有混合的内容，考虑用不同的方式。使用Navigtor.push并在那里显示选项。如果你想拥有上下文相关的东西，你可以在点击时滑动互动程序，使其变大并显示动作

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(),
        ],
      ),
    );
  }
}