使用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

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