使用 FutureBuilder 时动画 child

Question

我的应用程序中有一个 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 渲染？

Answer 1

使用 AnimatedSwitcher 淡出之前的 child 并淡入新的。

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,
    );
  },
);

Answer 2

使用 AnimatedSwitcher 并将我们想要显示的小部件存储在变量中 child 并在每个案例中更新它的值以避免丢失 return 的错误使用 continue 语句并跳转到每次都有 AnimatedSwitcher 的 return 在我的例子中我称之为 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,
            );
        }
      },
    );

使用 FutureBuilder 时动画 child

Animate child when using FutureBuilder

flutter

flutter-animation