Flutter：StreamBuilder 中的 AnimatedSwitcher

Question

我正在尝试在我的应用程序中实现一个 AnimatedSwitcher 以动画化使用 firebase 作为后端的聊天，我已经看到了各种示例但是当我尝试在聊天中发送新消息时动画不起作用，这是我的代码：

return StreamBuilder(
      stream: _chats,
      builder: (context, snapshot) {
        if (snapshot.hasData &&
            !snapshot.hasError &&
            snapshot.data.snapshot.value != null) {
          item = [];
          Map data = snapshot.data.snapshot.value;
          data.forEach((index, data) => item.add({
                "key": index,
                "message": data['message'],
                "sendBy": data['sendBy'],
                "time": data['time']
              }));
          item.sort((b, a) => a["time"].compareTo(b["time"]));
          return AnimatedSwitcher(
            duration: Duration(milliseconds: 500),
            child: ListView.builder(
                reverse: true,
                controller: _scrollController,
                itemCount: item.length,
                itemBuilder: (context, index) {
                  return MessageTile(
                      message: item[index]['message'],
                      sendByMe: widget.user.uid == item[index]['sendBy'],
                      time: item[index]['time']);
                }),
          );
        } else {
          return Container();
        }
      },
    );

Answer 1

If the "new" child is the same widget type and key as the "old" child, but with different parameters, then AnimatedSwitcher will not do a transition between them

每次 StreamBuilder 重建时尝试为子项 (ListView) 提供不同的密钥

return AnimatedSwitcher(
  duration: Duration(milliseconds: 500),
  child: ListView.builder(
    key: ValueKey<int>(item.length), //perhaps a key based on the number of messages, so it will always be different
    reverse: true,
    controller: _scrollController,
    itemCount: item.length,
    itemBuilder: (context, index) {
      return MessageTile(
        message: item[index]['message'],
        sendByMe: widget.user.uid == item[index]['sendBy'],
        time: item[index]['time']);
  }),
);

Flutter：StreamBuilder 中的 AnimatedSwitcher

Flutter: AnimatedSwitcher inside StreamBuilder

animation

chat

stream

firebase

flutter