使用 FutureBuilder 时为孩子设置动画

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

Use AnimatedSwitcher to fade out previous child and fade in new.

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