Flutter StreamBuilder（Firebase）淡入

Question

我有一個具有多個屏幕的應用程序（pageView + cupertino標簽欄）。 在幾頁內，我使用了一個streambuilder。 像這樣

class BookList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance.collection('books').snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError)
          return new Text('Error: ${snapshot.error}');
        switch (snapshot.connectionState) {
          case ConnectionState.waiting: return new Text('Loading...');
          default:
            return new ListView(
              children: snapshot.data.documents.map((DocumentSnapshot document) {
                return new ListTile(
                  title: new Text(document['title']),
                  subtitle: new Text(document['author']),
                );
              }).toList(),
            );
        }
      },
    );
  }
}

一切正常，但是當我切換頁面時（是的，我已經在使用保持客戶端實時混合功能）。 半秒鍾沒有任何響應，然后streambuilder出現了。 但是，我想在每次streambuilder加載完成時通過使用淡入淡出動畫使其更“柔和”。

那可能嗎？

謝謝！

Answer 1

無論是哪個數據源（Firebase），您StreamBuilder在StreamBuilder的builder屬性內用AnimatedSwitcher包裝最頂部的小部件即可實現該淡入動畫。

class BookList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance.collection('books').snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError)
          return new AnimatedSwitcher(
             duration: Duration(milliseconds: 700),
             child: snapshot.hasData?Text('Error: ${snapshot.error}')):Container();
        switch (snapshot.connectionState) {
          case ConnectionState.waiting: return new Text('Loading...');
          default:
            return new ListView(
              children: snapshot.data.documents.map((DocumentSnapshot document) {
                return new ListTile(
                  title: new Text(document['title']),
                  subtitle: new Text(document['author']),
                );
              }).toList(),
            );
        }
      },
    );
  }
}