在线/离线状态隐式动画

Question

我正在应用中构建连接横幅以显示连接状态。

我想用3种状态制作动画：

（屏幕上没有任何内容）

1. 1. 无法连接：淡入红色的“离线”横幅。

      1. 无连接->连接：转换为绿色的“在线”横幅。

      2. 2秒后，绿色横幅消失不见。

我尝试使用AnimatedContainer，并且可以使该动画从红色变为绿色。

也可以尝试使用AnimatedCrossFade：

AnimatedCrossFade(
    firstChild: _offlineBanner(),
    secondChild: _onlineBanner(),
    crossFadeState: !connected? CrossFadeState.showFirst : CrossFadeState.showSecond,
    duration: const Duration(seconds: 2),
),

但这意味着Banner始终显示。无法淡出。基本上我需要在thirdChild: Container(),中使用AnimatedCrossFade，但是它没有此功能。

因此问题是无法解决在建立连接且未更改的情况下如何不显示任何内容的问题。所以我对步骤0-1和2-3有疑问。

怎么办？ 谢谢！