Flutter: what is the best practice for auto & periodic update of a flutter element

Question

I'm trying to build a flutter app which shows a chart that reads data from a MySql database (a table)

I want to update the chart when the data in the table is updated without manually refresh the page

the table is updated by a script run by a cronjob (hourly, for example)

the first way that comes to my mind is using flutter's Timer.periodic function so that the app can periodically check the table if there is any update

but, in this way, I can not get a real-time update (to do so is seriously expensive)

So the second way I could think of is using WebSocket however, I'm sure if it's possible or an appropriate way to do this.

because I don't know how to do that. should the app (flutter) websocket commnunicate with Mysql? should I implement backend websocket to let flutter know the update?

Using WebSocket is the best way to implement real-time update chart application? Or are there any other ways that can solve this issue?

Thank you for whoever answer to this question.

Answer 1

You can use the websocket to let the application know about the new updates. For example, if x device inserts a new record you can send it to the websocket and listen for it from the y device. During this process, you can insert that data to the database from the server side and you don't need to fetch data again and again to achieve real-time.(you have to build logic to listen and update the UI as your needs) Rather than MYSQL, it would be more efficient if you use the mongodb with nodejs API for this. There are a lot of tutorials about websocket implementation with flutter.

Also you can use firebase for real-time communication. You don't need to worry about the server side if you use the firebase. Keep in mind to follow recommended guidelines from the documentation since they count the bill for each request you send from your application.

Another option is Appwrite. As I heard, it is the best replacement for the firebase and since I haven't used it yet I'm not going to say more about it, but you should try it if it is a match for your requirements.

Answer 2

min-height: 100vh to the body element should do the trick. Here, 100vh means that the initial body height will take 100% of the viewport height, its better to use :

height : 100vh;