18、Flutter 中的 Hero 动画与 Firebase 集成实战

Flutter 中的 Hero 动画与 Firebase 集成实战

Hero 动画简介

Hero 动画这个名字乍一看可能有些奇怪，但只要使用过移动应用的人都见过这种动画。对于移动平台开发者来说，可能听说过或使用过共享元素，即那些在不同屏幕间保持存在的元素，这就是 Hero 动画的定义。

在 Flutter 中，Hero 是在屏幕间“飞行”的小部件。实际上，不同屏幕上的 Hero 并非同一个对象，但从用户视角看是同一个。其理念是创建一个能在屏幕间存在且外观有所变化的小部件。例如，当点击列表项时，过渡开始，详细屏幕显示，Hero 小部件会改变位置和大小，直到达到最终效果。

实现 Hero 过渡

我们将对 Favors 应用进行修改，使其在“你的帮助列表”屏幕和“请求帮助”屏幕之间实现 Hero 动画。当点击“请求帮助”浮动按钮时，会平滑过渡到下一页，返回时同样有效。

首先，在小部件树中添加 Hero 小部件，包裹参与动画的小部件：

class FavorsPageState extends State<FavorsPage> {
  // ...
  @override
  Widget build(BuildContext context) {
    // ...
    floatingActionButton: FloatingActionButton(
      heroTag: "request_favor",
      child: FloatingActionButton(
        onPressed: () {