how to refresh message stream for chat inbox in flutter

Question

I'm new to the flutter, I start to create a simple messenger app using flutter and flutter stream to handle API call for get message content.

also created the message controller to update and refresh the message list

class MessageService {
  Client httpClient = Client();
  List<MessageModal> _messageList = [];

  Future<AppConfig> _getApiURL() async {
    final config = await AppConfig.forEnvironment('dev');
    return config;
  }

  Future<List<MessageModal>> getMessageThread(
      String senderId, String receiverId) async {
    var config = await _getApiURL();
    var url = config.baseUrl + "message/history";
    final response = await httpClient.post(url,
        headers: {"content-type": "application/json"},
        body: json.encode({
          "senderId": senderId,
          "receiverId": receiverId,
        }));

    if (response.statusCode == 200) {
      _messageList = messageListFromJson(response.body);
    } else {
      _messageList = [];
    }
    return _messageList;
  }
}

Here is the message service class for fetch API data

class MessageService {
  Client httpClient = Client();
  List<MessageModal> _messageList = [];

  Future<AppConfig> _getApiURL() async {
    final config = await AppConfig.forEnvironment('dev');
    return config;
  }

  Future<List<MessageModal>> getMessageThread(
      String senderId, String receiverId) async {
    var config = await _getApiURL();
    var url = config.baseUrl + "message/history";
    final response = await httpClient.post(url,
        headers: {"content-type": "application/json"},
        body: json.encode({
          "senderId": senderId,
          "receiverId": receiverId,
        }));

    if (response.statusCode == 200) {
      _messageList = messageListFromJson(response.body);
    } else {
      _messageList = [];
    }
    return _messageList;
  }
}

Here is the ui preview to create the message list preview

StreamBuilder<List<MessageModal>> _buildStreamBuilder() {
      return StreamBuilder<List<MessageModal>>(
//        stream: _messageService.getMessageThread("UID1", "UID2").asStream(),
        stream: streamController.counter,
        initialData: _messageList,
        builder:
            (BuildContext context, AsyncSnapshot<List<MessageModal>> snapshot) {
          print(snapshot.data);
          if (snapshot.hasError) {
            print(snapshot.error);
            return Center(
              child: Text("Something went wrong!"),
            );
          } else if (snapshot.hasData) {
            List<MessageModal> messages = snapshot.data;
            return _buildMessageHistory(messages);
          } else {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      );
    }

I need to do the messages update and also keep updating (send the API call and fetch data to stream) the message preview. can anybody help me on this one.

Solution

It's been a while since this question was originally asked. Since then the Stream Chat Flutter support has improved a lot. Implementing what this question asks is now really easy, with varying levels of customisability.

Pre-built UI widgets package : https://pub.dev/packages/stream_chat_flutter

• This package is plug and play to add chat support, with a lot of customisability options.

If you want more control: https://pub.dev/packages/stream_chat_flutter_core

• This package provides convenient builders to enable you to build your own UI components. It does the heavy lifting for you but will require more implementation on your side.

If you want low level control: https://pub.dev/packages/stream_chat

Check out the tutorial for an easy getting started guide: https://getstream.io/chat/flutter/tutorial/

See here for awesome Stream examples of what you can build: https://github.com/GetStream/flutter-samples

Video tutorials: https://www.youtube.com/playlist?list=PLNBhvhkAJG6t-BxkRAnSqa67lm5C1mpKk