0

I am new to the flutter world. I recently started with it and got a question about what to use to accomplish the following:

I have a list of items which I want to show in a list/grid. The list gets retrieved from a remote rest call so through a future.

At the same time the app is connected to a remote mqtt server and receives mqtt update messages from other clients when they modify an item

So basically need to manipulate the local items list when an mqtt update message is received and replace the updated item. This needs to be reflected to the app UI in real-time.

I've read for futures they use FutureBuilder, but at the same time it is meant to be "set and forget" with a future that doesn't change during the app life. So there is StreamBuilder, but I don't have a real stream of things and at the same time can't replace an item in the stream but just add. So how should I realize this? It's kinda like an hybrid thing that even when searching and searching the web I can't seem to find a solution/similar case to.

Thank you in advance and sorry for the stupid question :)

Tried with futurebuilder and streambuilder but encountered the aformentioned issues with both. Not really sure on how to proceed.

Ormad
  • 1
  • 2
  • MQTT is giving you a stream of changes, I presume. Just have a watcher that maintains the updated local state, and notifies listeners to repaint. You can do that pretty easy with Riverpod, for example. – Randal Schwartz Jul 03 '23 at 22:35

1 Answers1

0

I don't see the problem with a FutureBuilder and a StreamBuilder.

We assume that you have a scaffold. In this scaffold you set your FutureBuilder and pass it your future, which fetches the records from your REST interface. It is important that this happens only once, many make the following mistake, which is well shown in this video:

https://www.youtube.com/watch?v=sqE-J8YJnpg

Now once you have your records, then you show a StreamBuilder. I don't know much about mqtt, but you will probably use https://pub.dev/packages/mqtt_client.

This StreamBuilder expects a stream. You get it from the package as I see, here is an example:

https://www.emqx.com/en/blog/using-mqtt-in-flutter

You can access the stream like this (in the example):

client.updates

Pass this to your StreamBuilder and update your ui.

Ozan Taskiran
  • 2,922
  • 1
  • 13
  • 23
  • Thank for your answer. If I nest stream builder inside future builder how will the stream builder change the original content of future builder? Doesn't it just add new items? I got to modify/remove/add items to the original list. – Ormad Jul 03 '23 at 19:49
  • It depends .. as i said i don't know how mqtt in detail works or what kind of response you get. If you get an id or something from the response, you can search for the id in your fetched data. If you find it it, you update it. If you get all items every time your data changes, you can just simply updat all items. Your FutureBuilder shouldn't trigger again after you get updates in your StreamBuilder, you just change your data which you got from the FutureBuilder. Ignore the FutureeBuilder after you fetched data :D – Ozan Taskiran Jul 04 '23 at 10:04