flutter - 使用 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 并淡入新的 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,
    );
  },
);