Flutter - how to update screen with latest api response

Question

I want to update the screen whenever I call the API. Right now I have the following

Future<String> getData() async {
var response = await http.get(
    Uri.parse('https://www.api_endpoint.com'),
    headers: {
      'Accept':'application/json'
    }
);

Timer.periodic(Duration(microseconds: 1000), (_) {
  this.setState(() {
    data = json.decode(response.body);
    print(data); //I can see this in the console/logcat
  });
});

}

@override
void initState() {
  this.getData();
}

from the line above print(data); I can see the latest api responses in console/logcat but the screen doesn't update with the new values. I can't get my head around why the latest responses aren't shown on screen when this.setState() is called every second with the Timer... all feedback is welcome. Thanks

It's impossible to say without knowing what your build method looks like. — nvoigt, Nov 03 '21 at 18:14

Александр Инженер · Answer 1 · 2021-11-03T19:11:42.677

Future executes once and returns just one result. initState() executed when creating a widget, this is also usually once. For your tasks it is better to use Streams, my solution is not the best in terms of architecture, but as an example it works.

  //We create a stream that will constantly read api data
  Stream<String> remoteApi = (() async* {
    
    const url = "http://jsonplaceholder.typicode.com/todos/1";
    
    //Infinite loop is not good, but I have a simple example
    while (true) {
      try {

        var response = await Dio().get(url);
        
        if (response.statusCode == 200) {
          
             //remote api data does not change, so i will add a timestamp
              yield response.data.toString() +
              DateTime.now().millisecondsSinceEpoch.toString();
        }

        //Pause of 1 second after each request
        await Future.delayed(const Duration(seconds: 1));

      } catch (e) {
        print(e);
      }
    }
  })();

  //On the screen we are waiting for data and display it on the screen
 // A new piece of data will refresh the screen

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: StreamBuilder<String>(
        stream: remoteApi,
        builder: (
          BuildContext context,
          AsyncSnapshot<String> snapshot,
        ) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.connectionState == ConnectionState.active ||
              snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              return const Text('Error');
            } else if (snapshot.hasData) {
              return Center(
                child: Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Text(
                    snapshot.data.toString(),
                    textAlign: TextAlign.center,
                  ),
                ),
              );
            } else {
              return const Center(child: Text('Empty data'));
            }
          } else {
            return Center(child: Text('State: ${snapshot.connectionState}'));
          }
        },
      ),
    );
  }

Or simplest solution

 Future<String> remoteApi() async {
    try {
      const url = "http://jsonplaceholder.typicode.com/todos/1";
      var response = await Dio().get(url);
      if (response.statusCode == 200) {
        return response.data.toString() +
            DateTime.now().millisecondsSinceEpoch.toString();
      } else {
        throw ("Error happens");
      }
    } catch (e) {
      throw ("Error happens");
    }
  }
  
 var displayValue = "Empty data";
  
 @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Padding(
          padding: const EdgeInsets.all(15.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Center(child: Text(displayValue)),
              Center(
                child: ElevatedButton.icon(
                  onPressed: () async {
                    displayValue = await remoteApi();
                    setState(() {});
                  },
                  label: const Text('Get API'),
                  icon: const Icon(Icons.download),
                ),
              )
            ],
          ),
        ));
  }

Thanks for reply @Александр Инженер, I like the simpliest solution but having issue trying to integrate timer into it. Can you assist... — JC23, Nov 03 '21 at 23:11

score -1 · Answer 2 · answered Nov 03 '21 at 18:16

-1

Ah, you don't actually call your API every timer tick, you just decode the same body from the first call.

If you want to call your API periodically, you need to move the actual http.get call inside the timer method.

answered Nov 03 '21 at 18:16

nvoigt

75,013
26
93
142

thanks for reply @nvoigt but just to clarify, I **do** see new values in the response so isn't that a new call each time or were you referencing something else? – JC23 Nov 03 '21 at 19:19
If you see *different* values each timer tick, then that is the result from code you have not posted here. what you posted cannot have different results each time. – nvoigt Nov 03 '21 at 21:14

score -2 · Answer 3 · answered Nov 04 '21 at 16:13

Got it using the answer found here... moved the Timer that called this.setState() to the initState method

@override
void initState() {
 this.getData();
 _everySecond = Timer.periodic(Duration(seconds: 5), (Timer t) {
   setState(() {
    getData();
   });
 });
}

Once I searched for how to update the state, change state, etc. found the solution quickly...

Flutter - how to update screen with latest api response

3 Answers3