'Refreshing a screen to update data in Flutter

I am trying to understand how to refresh my app screen with new data. The app is a dashboard that has several job cards and when another user applies something to the card there is a refresh button in the app that all users can press to get the latest version of the update. Stupid fix I know but I am clueless atm.... its summer and very hot any guidance will be very very appreciated. I have a function refreshLists, within this function I have a bunch of calls to functions that send a request off to my API for data. My problem. I am unable to understand how to send a refresh request from my asp.net 6 web API so that the screen refreshes when data has updated. My solution so far was to use an IconButton and within the on pressed it goes like this

onpressed() async {
 await refreshLists();
 setstate(){};
}

Why do I have to click the button twice for the screen to update with the new data. instead of running the function then when the lists are all updated then the screen is rebuilt. Cheers for any help all answers will be appreciated.

=========== Update ============= Refresh List methods sends a call to my requests file to send a certain http request to my web api.

refreshLists() {
  getAllClients();
  getAllJobs();
  getAllJobsStatusDefined();
  getSortedJob();
}

Here is an example of how my request works.

Future getAllClients() async {
  client.badCertificateCallback =
      ((X509Certificate cert, String host, int port) => true);
  HttpClientRequest request =
      await client.getUrl(Uri.parse("$emulatorHost/Clients"));
  request.headers.add("Authorization", "Bearer " + jwt);

  HttpClientResponse result = await request.close();

  if (result.statusCode == 200) {
    List<dynamic> jsonData =
        jsonDecode(await result.transform(utf8.decoder).join());
    if (listCustomers.isNotEmpty) {
      listCustomers.clear();
      for (var i in jsonData) {
        listCustomers.add(
          new Customer(
            i['clientID'],
            i['clientName'],
            i['address'],
            i['phone'],
          ),
        );
      }
    } else {
      for (var i in jsonData) {
        listCustomers.add(
          new Customer(
            i['clientID'],
            i['clientName'],
            i['address'],
            i['phone'],
          ),
        );
      }
    }
  }
}

You can see that the request method checks if the list has data if it does then it clears the list and adds all the new updated data.

Simple Example https://github.com/Riley-Howley/FlutterRefreshHelp



Solution 1:[1]

How I solved the issue.

  1. I made a polling function that send a get request to my api every 5 seconds looking for the max id in the table. On first load the max ids are stored within the app and then when the id changes it does a full request of the data.

  2. using a stream builder I was then able to hook up the data to refresh every 5 seconds only when the ids change and refresh the screen. Hope this helps anyone that is struggling.

Solution 2:[2]

  1. A simple fix to this problem is that make a stream builder and set the stream as your function to refresh the list.

  2. Or you can use any state management so that it will notify all the listeners when there is a data change

Solution 3:[3]

You describe 2 problems. To trigger data update from the server, you need to establish a web-socket connection or use a 3rd party service, like firebase.

In addition, the "set state" is a basic flutter building block that you should use for specific cases. Usually, when you build an app, you would like to work with stateless widgets and a state manager that tells the UI when and what to refresh

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Riley-Howley
Solution 2 Akhil
Solution 3 Asaf Pinhassi