title: How to display a stream of list from a bloc using a listview
body: <p>I am working on an instant messaging application, and I need the user to send and receive messages in real-time. I am using Firebase as the app backend, <code>flutter_bloc</code> package to manage states, and streams to send and receive messages in real-time.</p>
  
  <p>I have successfully implemented the send message functionality, and I am able to retrieve the messages successfully from Cloud Firestore, but when the user sends a message it is not loaded into the chat messages <code>ListView</code>.</p>
  
  <p>This is the implementation of the <code>ChatProvider</code> <code>getCurrentChatMessages()</code> method that is called in the <code>ChatBloc</code>.</p>
  
  <pre class="lang-dart prettyprint-override"><code>  Stream&lt;List&lt;ChatMessage&gt;&gt; getCurrentChatMessages() {
      return this.messagesRef.orderBy('timestamp', descending: true)
      .snapshots()
      .map((QuerySnapshot snapshot) {
        return snapshot.documents.map&lt;ChatMessage&gt;((DocumentSnapshot snapshot) =&gt; ChatMessage.fromFirestore(snapshot)).toList();
      });
    }
  </code></pre>
  
  <p>In the <code>ChatProvider</code>, these are the methods that propagate the list of chat messages to the UI</p>
  
  <pre class="lang-dart prettyprint-override"><code>  Stream&lt;ChatState&gt; mapFetchCurrentChatMessagesEventToState(FetchCurrentChatMessagesEvent event) async* {
      yield FetchingCurrentChatMessagesState();
      final bool chatExists = await _chatProvider.chatExists;
      // If chat does not exists create chat.
      if (!chatExists) {
        await _chatProvider.createChat();
      }
      _chatProvider.getCurrentChatMessages().listen((List&lt;ChatMessage&gt; chatMessages) {
        print('Chat messages length: ${chatMessages.length}');
        dispatch(FetchedCurrentChatMessagesEvent(chatMessages));
      });
    }
  
    Stream&lt;ChatState&gt; mapFetchedCurrentChatMessagesEventToState(FetchedCurrentChatMessagesEvent event) async* {
      final List&lt;ChatMessage&gt; chatMessages = event.chatMessages;
      yield FetchedCurrentChatMessagesState(chatMessages);
    }
  </code></pre>
  
  <p>This is the <code>ListView</code> that displays the chat messages.</p>
  
  <pre class="lang-dart prettyprint-override"><code>class ChatMessagesList extends StatefulWidget {
    @override
    _ChatMessagesListState createState() =&gt; _ChatMessagesListState();
  }
  
  class _ChatMessagesListState extends State&lt;ChatMessagesList&gt; {
    List&lt;ChatMessage&gt; _chatMessages = List&lt;ChatMessage&gt;();
  
    @override
    Widget build(BuildContext context) {
      return Expanded(
        child: BlocBuilder&lt;ChatBloc, ChatState&gt;(
          condition: (ChatState oldState, ChatState newState) =&gt; oldState.hashCode != newState.hashCode,
          builder: (BuildContext context, ChatState state) {
            if (state is FetchingCurrentChatMessagesState) {
              return Center(
                child: CircularProgressIndicator(),
              );
            }
  
            if (state is FetchedCurrentChatMessagesState) {
              _chatMessages = state.chatMessages;
            }
  
            if (_chatMessages.length == 0) {
              return Container();
            }
  
            print('Chat Messages:\n$_chatMessages');
  
            return ListView.builder(
              reverse: true,
              itemCount: _chatMessages.length,
              itemBuilder: (BuildContext context, int index) {
                final ChatMessage chatMessage = _chatMessages[index];
                return ChatMessageTile(
                  chatMessage: chatMessage,
                );
              },
            );
          },
        ),
      );
    }
  }
  </code></pre>
  
  <p>Whenever, a message is sent, the <code>ChatBloc</code> sends the updated chat messages list to the <code>ChatMessagesList</code> widget, but the widget fails to update accordingly. It only displays the first element in the <code>_chatMessages</code> list, not until I <code>pop</code>, and <code>push</code> the route, that is when I get to see the updated list.</p>
  
  <p>I want the chat messages list to be updated with the sent message when the user clicks on the send message button.</p>