How to automatically update UI with the new tasks?

For example, while I'm on the tasks page, I load them once. In the meantime, let's say new task are created and stored from my web application to mysql db. I would still see only previously loaded tasks without any idea that the new record is created in the database.

I'm using ListView.builder to display the data, while calling the API on initState(). Also, it might be worth noting, I'm using Laravel with MySql for my backend.

What is the best way to update UI with new data whenever there is a new record in the mysql database?

Solution 1: Engr Talha

i have one solution to get real time record/Tasks with out page refresh on UI.

steps 1)Add new column name (is_seen) on Task table default is 0. 2)when tasks list you will show on front end then add is_seen =1 for all that Tasks that you have to show on front end. 3)Run ajax call in interval in Task Tasks Ui page that run after some interval like 3 sec etc and get all unseen tasks (condition is is_seen=0) on Ui Tasks page. 4)when new task create on table that will have is_seen=0.ajax call get that task and show on Tasks list on front end 5)then same time after rendering on new task on task list send ajax call to set is_seen=1 of that task.

I hope you understand this.