flutter-fab按钮动画，它将从下往上跳到顶部

Question

我需要动画方面的帮助，当我在第一个屏幕中单击FAB图标时，该图标将与动画一起显示，而另一个屏幕（如第二个图像所示）应与诸如窗帘的动画一起显示。 fab图标应该像第二张图片一样在应用程序栏中设置。

底部菜单应该在两个屏幕中都存在，就像给出的屏幕截图一样。

Answer 1

您可以做一件事，只需将浮动操作按钮包装到AnimatedContainer中

   AlignmentDirectional _ironManAlignment = AlignmentDirectional.bottomCenter; 

   ...

   floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
   floatingActionButton: AnimatedContainer(
        duration: Duration(seconds: 2),
        alignment: _ironManAlignment,
        child: FloatingActionButton(
          onPressed: () {
            _flyIronMan();
          },
          child: Icon(Icons.add),
        ),
      ),

喜欢这样当您按下按钮，然后调用此方法

  void _flyIronMan() {
    setState(() {
      _ironManAlignment =
          AlignmentDirectional(0.0, -0.8); //AlignmentDirectional(0.0,-0.7);
    });
  }

Answer 2

每页上带有Hero小部件的自动换行按钮，例如：

Hero(
 tag: 'fab',
 child: FloatingActionButton()
);