flutter - 我需要在 Flutter 中重现一个 Floating Action Button，它可以转换成一个横跨整个屏幕的新表面

Question

我需要重现在全屏页面上扩展的 FAB 的效果，就像谷歌在这个 video 中提出的那样。 ，但我不知道该怎么做。你有什么建议吗？

Answer 1

参见 animations library .

根据自述文件:

该包包含用于实现通常所需效果的预制动画。动画可以根据您的内容进行定制，并放入您的应用程序中以取悦您的用户。

这里使用的动画是一个 OpenContainer。 示例代码:

OpenContainer(
      transitionDuration: 500.milliseconds,
      closedBuilder: (BuildContext c, VoidCallback action) => FloatingActionButton(icon: Icon(Icons.add)),
      openBuilder: (BuildContext c, VoidCallback action) => SomeNewPage(),
      tappable: true,
    )

入门示例教程:

Flutter: The new 'animations' package explained

它甚至不必是 float 操作按钮。封闭和开放构建器中的小部件可以是您喜欢的任何小部件。