Flutter 动画添加按钮

Question

我目前正在学习 flutter 并尝试不同的东西。不久前，我发现了“Reflectly”这个应用程序。我想知道如何创建这样一个带动画的“添加按钮”。

反射添加按钮

我想到了两种实施的可能性。

1. 借助堆栈小部件和 4 个形状，其中 2 个用于 BottomBar，2 个用于按钮。该按钮将有动画、放大和移动。然而，对于这样一个按钮来说，这听起来有点复杂。

2. 整个事情是一个下拉菜单，但我不知道如何获得这样一个具有匹配动画的形状。尤其是这两件事让我很难想象如何实现这样一个按钮。

有人有想法吗？

Answer 1

您可以通过以下方式实现这一目标

创建 2 条不同的路径。 1 用于中心按钮，第二个是您希望在单击按钮时看到的输出的自定义形状。然后使用动画构建器并在单击时更改形状

Answer 2

当然！要创建类似 Reflectly 的“添加按钮”动画，您可以使用两个容器小部件。一个容器使用 ClipPath 塑造形状以实现特定形状，另一个容器充当按钮，样式看起来像棚子。

此外，您可以利用由 AnimationController 控制的 RotationTransition 小部件来为图标的旋转设置动画。

如果需要详细实现，可以参考我的GitHub仓库： 检查此在此处输入链接描述