CODEWITHSUNDEEP
flutter
user482594
user482594

Reputation: 17486

In flutter, how can I let a stateful widget/state know that the new data is available and it needs to rebuild?

I am building a simple chat app in Flutter, where there can be multiple users in a chat room. There are many rooms, and users can join multiple rooms at the same time, but only one chat screen (a.k.a user's active chat room) will be shown on user screen.

When a new message is posted by an user in a chat room, the server sends notification to other users (app/devices) in the room that new message is available.

At this moment, my app knows that there are new messages in the server, and it can even fetch the data from the server. However, I am unsure how I can pass that new data to the chat screen's StatefulWidget & State.

Question mark below is the missing step that I am having trouble with

  1. Server sends an event notification to an app for new message availability.
  2. App receives the event notification, a message handler processes & retrieves the new chat messages from the server. It now needs to pass new chat message data to Chat screen widget.
  3. ??? (Magic happens here and data is now passed to the chat screen widget/state)
  4. Chat screen widget/state now has new message data and refresh UI.

A few solutions that I have thought about are...

  1. Create a model that extends ChangeNotifier, and let the model keeps track of all chat messages that need to be displayed on UI. The chat screen widget will use Provider/Consumer to depend on that model. When a new chat message is fetched, it will be appended to the chat messages in the model. Subscribers (chat screen state) will be notified through notifyListeners(). The chat screen UI will get the notification and will be re-built, using the latest snapshot of chat messages available in the model.

  2. The state holds all chat messages that needs to be displayed. Also, create a stream. When new chat messages are fetched, push them through the stream. Let the state subscribe to the stream, and whenever new data gets passed in, append them to message list in the state using setState, and UI will be rebuilt.

However, I just don't feel like above two methods are the most elegant way to let State know that new chat message data is available. In regular programming where I don't have to deal with UI state management, I would create a public method in the chat screen widget/state and call it with chat messages as an argument, but that is not how things are done in flutter.

I am new to flutter and I am not familiar with good practices. What is a standard/best way of approaching this problem? Are there simpler and better way to pass data to chat screen widgets in my use case?

Upvotes: 1

Views: 467

Answers (1)

wiradikusuma
wiradikusuma

Reputation: 1909

You can wrap your chat window inside a StreamBuilder (https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html).

It basically rebuilds the whole UI inside it on every change (e.g. a new message), but that's how Flutter works anyway.

Upvotes: 1

Related Questions