Flutter 下拉浮动操作按钮

我有一个floatingActionButton，它有下面的代码动画。 但是我应该怎么做才能让它倒下呢？ 我的意思是，我希望按钮从上方打开，项目在主浮动操作按钮下方打开

import 'package:flutter/material.dart';

class FancyFab extends StatefulWidget {
  final Function() onPressed;
  final String tooltip;
  final IconData icon;

  FancyFab({this.onPressed, this.tooltip, this.icon});

  @override
  _FancyFabState createState() => _FancyFabState();
}

class _FancyFabState extends State<FancyFab>
    with SingleTickerProviderStateMixin {
  bool isOpened = false;
  AnimationController _animationController;
  Animation<Color> _buttonColor;
  Animation<double> _animateIcon;
  Animation<double> _translateButton;
  Curve _curve = Curves.easeOut;
  double _fabHeight = 56.0;

  @override
  initState() {
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500))
          ..addListener(() {
            setState(() {});
          });
    _animateIcon =
        Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);
    _buttonColor = ColorTween(
      begin: Colors.blue,
      end: Colors.red,
    ).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
  dispose() {
    _animationController.dispose();
    super.dispose();
  }

  animate() {
    if (!isOpened) {
      _animationController.forward();
    } else {
      _animationController.reverse();
    }
    isOpened = !isOpened;
  }

  Widget add() {
    return Container(
      child: FloatingActionButton(
        onPressed: null,
        tooltip: 'Add',
        child: Icon(Icons.add),
      ),
    );
  }

  Widget image() {
    return Container(
      child: FloatingActionButton(
        onPressed: null,
        tooltip: 'Image',
        child: Icon(Icons.image),
      ),
    );
  }

  Widget inbox() {
    return Container(
      child: FloatingActionButton(
        onPressed: null,
        tooltip: 'Inbox',
        child: Icon(Icons.inbox),
      ),
    );
  }

  Widget toggle() {
    return Container(
      child: FloatingActionButton(
        backgroundColor: _buttonColor.value,
        onPressed: animate,
        tooltip: 'Toggle',
        child: AnimatedIcon(
          icon: AnimatedIcons.menu_close,
          progress: _animateIcon,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        Transform(
          transform: Matrix4.translationValues(
            0.0,
            _translateButton.value * 3.0,
            0.0,
          ),
          child: add(),
        ),
        Transform(
          transform: Matrix4.translationValues(
            0.0,
            _translateButton.value * 2.0,
            0.0,
          ),
          child: image(),
        ),
        Transform(
          transform: Matrix4.translationValues(
            0.0,
            _translateButton.value,
            0.0,
          ),
          child: inbox(),
        ),
        toggle(),
      ],
    );
  }
}

导入“包装：颤振/材料.省道”；
类FancyFab扩展了StatefulWidget{
final Function（）已按下；
最终字符串工具提示；
最终的Iconda图标；
FancyFab（{this.onPressed，this.tooltip，this.icon}）；
@凌驾
_FancyFastrate createState（）=>\u FancyFastrate（）；
}
类_fancyFestate扩展状态
使用SingleTickerProviderStateMixin{
bool-isOpened=false；
AnimationController _AnimationController；
动画按钮颜色；
动画(animateIcon),；
动画翻译按钮；
曲线_Curve=Curves.easeOut；
双倍高度=56.0；
@凌驾
initState（）{
_动画控制器=
AnimationController（vsync:this，duration:duration（毫秒：500））
…addListener（）{
setState（（）{}）；
});
_动画师=
Tween（开始：0.0，结束：1.0）。设置动画（_animationController）；
_buttonColor=ColorTween(
开始：颜色，蓝色，
结束：颜色。红色，
).动画（曲线动画）(
父项：_animationController，
曲线：区间(
0.00,
1.00,
曲线：曲线。线性，
),
));
_translateButton=吐温(
开始：_fabHeight，
完：-14.0，
).动画（曲线动画）(
父项：_animationController，
曲线：区间(
0.0,
0.75,
曲线：_曲线，
),
));
super.initState（）；
}
@凌驾
处置{
_animationController.dispose（）；
super.dispose（）；
}
制作动画（）{
如果（！等间距）{
_animationController.forward（）；
}否则{
_animationController.reverse（）；
}
等间距=！等间距；
}
小部件添加（）{
返回容器(
子：浮动操作按钮(
onPressed:null，
工具提示：“添加”，
子：图标（Icons.add），
),
);
}
小部件图像（）{
返回容器(
子：浮动操作按钮(
onPressed:null，
工具提示：“图像”，
子：图标（Icons.image），
),
);
}
小部件收件箱（）{
返回容器(
子：浮动操作按钮(
onPressed:null，
工具提示：“收件箱”，
子：图标（Icons.inbox），
),
);
}
小部件切换（）{
返回容器(
子：浮动操作按钮(
背景颜色：_buttonColor.value，
onPressed：设置动画，
工具提示：“切换”，
孩子：动画片(
图标：animateDictions.menu\u关闭，
进展：_animateecon，
),
),
);
}
@凌驾
小部件构建（构建上下文）{
返回列(
mainAxisAlignment:mainAxisAlignment.end，
儿童：[
转化(
转换：Matrix4.translationValues(
0.0,
_translateButton.value*3.0，
0.0,
),
子项：添加（），
),
转化(
转换：Matrix4.translationValues(
0.0,
_translateButton.value*2.0，
0.0,
),
子：image（），
),
转化(
转换：Matrix4.translationValues(
0.0,
_translateButton.value，
0.0,
),
子项：收件箱（），
),
切换（），
],
);
}
}

您可以在此处看到实现：

---

或者是否有其他方法可用于此目的？

这就是您正在寻找的：

或者，您甚至可以使用这些晶圆厂设计：