与StreamBuilder一起对Listview.Builder中添加/删除的元素进行动画处理

时间:2019-03-31 00:50:21

标签: firebase-realtime-database flutter flutter-animation

想法很简单(实时聊天)。我的StreamBuilder有一个ListView.builder,并且已连接到 Firebase实时数据库。如果现在有一个新元素出现,我希望它从底部到其位置被“动画化”(请参阅​​WhatsApp)。不,我不想使用FirebaseAnimatedList

StreamBuilder(
                  stream: _queryDatabase.onValue,
                  builder: (BuildContext context, snapshot) {
                    if (snapshot.hasData) {
                      if (snapshot.data.snapshot.value != null) {
                        //final int documentsLength = snapshot.data.documents.length;
                        Map<dynamic, dynamic> map =
                            snapshot.data.snapshot.value;

                        List<dynamic> list = map.values.toList()
                          ..sort((a, b) =>
                              b['timestamp'].compareTo(a['timestamp']));
                        final int listLength = map.values.toList().length;    
                        return ListView.builder(
                            padding: const EdgeInsets.all(8.0),
                            physics: const AlwaysScrollableScrollPhysics(),
                            controller: _scrollController,
                            itemCount: listLength,
                            reverse: true,
                            itemBuilder: (context, int index) {
                              return new ChatMessage(
                                  snapshot: list,
                                  index: index,
                                  userId: widget.userId,
                                  groupId: widget.groupId,
                                  admins: widget.admins,
                                  singleChat: false,
                                  bannedUsers: widget.bannedUsers);
                            });
                      } else {
                        return Container(
                            child: Center(
                                child: Text(
                          'Poste die erste Chatnachricht.',
                          style: TextStyle(fontSize: 20.0, color: Colors.grey),
                          textAlign: TextAlign.center,
                        )));
                      }
                    } else {
                      return Center(child: CircularProgressIndicator());
                    }
                  },
                )

0 个答案:

没有答案