如何为 StreamBuilder 生成的小部件制作动画？

Question

我正在尝试使用 StreamBuilder 生成屏幕内容。它在 bloc 模式下工作得很好，但有一件事我正在努力解决。如何为生成的内容（WidgetA 和 WidgetB）之间的变化设置动画，如淡入淡出或滑动效果？

    ...
    return AnimatedSwitcher(
      duration: Duration(seconds: 4),
      child: BlocBuilder<ContentEvent, int>(
        bloc: bloc,
        builder: (context, contentID) {
          if (contentID == 1) {
            return WidgetA();
          } else {
            return WidgetB();
          }
        },
      ),
    );
    ...

Answer 1

你可以试试 AnimatedCrossFade 它接受 2 children、持续时间和状态（AnimatedCrossFadeState.showFirst 和 AnimatedCrossFadeState.showSecond）并且它将在两个 children.

之间动画淡入淡出

文档：https://docs.flutter.io/flutter/widgets/AnimatedCrossFade-class.html

Answer 2

您的 BlocBuilder 应该包裹 AnimatedSwitcher 而不是相反。

AnimatedSwitcher 的动画发生在其直接 child 变化时。但在你的情况下，直接 child 是 always BlocBuilder.

StreamBuilder(
  stream: stream,
  builder: (context, snapshot) {
    return AnimatedSwitcher(
      duration: const Duration(seconds: 4),
      child: snapshot.hasData
        ? Text(snapshot.data)
        : CircularProgressIndicator();
    );
  }
),

如何为 StreamBuilder 生成的小部件制作动画？

How to animate widget generated by StreamBuilder?

android

ios

flutter

flutter-animation