Flutter chat app with django channels backend keeps reloading - django

Question

I am using flutter chat app and using Django Rest Framework + channels as the backend. In the chat page, I am using the following code to display messages -
Scaffold(
backgroundColor: backColor,
appBar: AppBar(),
body:
GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: StreamBuilder(
stream: channel.stream,
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
Theme.of(context).primaryColor,
),
),
);
}else{
var mymessages = jsonDecode(snapshot.data);
if(mymessages['command']=='messages'){
// setState(() {
messages = ChatMessagesList.fromJson(mymessages["messages"]).messages;
// });
}else{
ChatMessage msg = ChatMessage.fromJson(mymessages["message"]);
if(!messages.contains(msg))
// setState(() {
messages.add(msg);
// });
}
return Column(
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
color: backColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30.0),
topRight: Radius.circular(30.0),
),
child:
ListView.builder(
reverse: true,
padding: EdgeInsets.only(top: 15.0),
itemCount: messages.length,
itemBuilder: ( context, index) {
final ChatMessage message = messages[index];
final bool isMe = message.sender.username == linUser.username;
return _buildMessage(message, isMe);
},
),
),
),
),
_buildMessageComposer(),
],
);
}
}
)
,
),
)
Here channel is IOWebSocketChannel that connect to django websocket url, and it is closed in dispose(). messages is a List<ChatMessage> declared outside build. Depending on what is sent via channel.sink either list of ChatMessage is received or just a single, latest ChatMessage sent by users.
Problem is, as long as the list of messages has a message, the chat page as well as all the previous pages in the stack start reloading/refreshing continuously, the displayed page itself stays at the chat page, but in the terminal, the print statements from earlier pages like Home Page and ChatRooms page keep showing up repeatedly, non stop, without any error. I have tried a few methods like using rest api to load the past messages, but the moment there is a new message on channel.stream, the reload/refresh starts. It only stops when I navigate back to previous page i.e. the ChatRooms page. I tried using stream controller but that went nowhere.
I also checked some examples that use firebase, and realized that their stream receives the entire list of messages everytime. What I am trying to do is fetch the list of past messages once at the beginning, save it inside messages, and then keep adding to the list as and when messages are sent/received. The same will be reflected in the page.