使用 FutureBuilder 时为孩子设置动画答案

【问题标题】：Animate child when using FutureBuilder使用 FutureBuilder 时为孩子设置动画
【发布时间】：2020-08-07 12:00:59
【问题描述】：

我的应用中有一个FutureBuilder，具有常规结构：

FutureBuilder(
  future: futureData(),
  builder: (context, snapshot) {
    if(snapshot.connectionState == waiting) {
      return Center(
        child: SpinKitCircle(color: Colors.blue),
      );
    } else {
      return ListView.builder();
    }
  }
)

我不喜欢它突然出现在屏幕上，所以，我的最后一个问题是，我怎样才能让ListView.builder() 以动画方式被FutureBuilder 渲染？

【问题讨论】：

标签： flutter flutter-animation

【解决方案1】：

使用AnimatedSwitcher 淡出以前的孩子并淡入新的孩子。

FutureBuilder(
  future: futureData(),
  builder: (context, snapshot) {
    Widget child;
    if (snapshot.connectionState == ConnectionState.waiting) {
      child = CircularProgressIndicator(
        key: ValueKey(0), // assign key
      );
    } else {
      child = ListView.builder(
        key: ValueKey(1), // assign key
      );
    }

    return AnimatedSwitcher(
      duration: Duration(seconds: 1),
      child: child,
    );
  },
);

【讨论】：

【解决方案2】：

使用 AnimatedSwitcher 并将我们想要显示的小部件存储在变量中 child 并在每种情况下更新它的值以避免错过返回的错误使用 continue 语句并跳转到有 AnimatedSwitcher 的返回，在我的情况下我每次都称它为 display

FutureBuilder(

      future: http.get(
        "https://source.unsplash.com/random?portrait",
      ),
      // ignore: missing_return
      builder: (ctx, snapshot) {
        Widget child;
        switch (snapshot.connectionState) {
          case ConnectionState.none:
          case ConnectionState.active:
          case ConnectionState.waiting:
            child = Container(
              width: width * 0.2,
              height: width * 0.2,
              child: Center(
                child: Container(
                  width: width * 0.1,
                  child: CircularProgressIndicator(),
                ),
              ),
            );
            continue display;
          case ConnectionState.done:
            if (snapshot.hasError) return CircleAvatar(child: Text('Error: '));
            // when we get the data from the http call, we give the bodyBytes to Image.memory for showing the image
            child = CircleAvatar(
                radius: width * 0.1,
                backgroundImage: MemoryImage(snapshot.data.bodyBytes));
            continue display;
          display:
          default:
            return AnimatedSwitcher(
              duration: Duration(milliseconds: 300),
              child: child,
            );
        }
      },
    );

【讨论】：

你能添加一些关于如何/为什么工作的描述吗？（来自Review）