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

Question

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

Answer 1

一种更简单的方法是使用 Hero，它是 material 小部件（随 Flutter 一起提供）。

Flutters 团队已经为 FloatingActionButton 构建了这个。你只需要

1.Give FloatingActionButton 来自您当前页面的唯一标记（标识符）。

Scaffold(
   floatingActionButton: FloatingActionButton(
    heroTag: 'newProduct',//replace with you tag
    child: Icon(Icons.add),
    onPressed: (){
     //Open the new page here
     })),

2.Into新页面，将要交叉淡入淡出的内容用Hero

包裹起来

Hero(
tag: "newProduct",
child: Scaffold(...))//Animate the whole page.

注意：不能在同一个页面中使用同一个key的两个英雄。另请注意，根据您的设备速度，此动画在调试模式下可能不可见，但在发布模式下运行良好

Answer 2

参见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

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

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

I need to reproduce in Flutter a Floating Action Button that can transform into a new surface that spans the entire screen

material-design

floating-action-button

flutter

flutter-animation