How auto refresh widgets and update api data in every 30secs?

Question

I am developing a cricket live score application, I develop a score card and i want to update score according to my JSON API data and refresh widgets. what should i need to do? i am using http request as Network request. And when i change the activity and turned back to livescore() scores are updated (Reloaded) but here i want that staying on the same activity Scores updates. I am using Future Builder.

Code Samples: LiveScore card area:

  LiveMatch() {
    return FutureBuilder(
      future: getlivescore(),
      builder: (BuildContext context, AsyncSnapshot<Map> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(
              child: SizedBox(
                  child: CircularProgressIndicator(
            strokeWidth: 2,
            color: Color(0xff38547C),
          )));
        }
        if (snapshot.hasData) {
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Text("Live Match"),
                  Padding(padding: EdgeInsets.all(16)),
                  Row(
                    children: [
                      ImageIcon(
                        AssetImage("assets/images/ball.png"),
                        size: 10,
                        color: Colors.red[800],
                      ),
                      Padding(padding: EdgeInsets.all(1)),
                      Text("Live"),
                    ],
                  )
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Row(children: [
                        CircleAvatar(
                          backgroundImage: NetworkImage(
                              "${snapshot.data!["data"][0]['image_path1']}"),
                          backgroundColor: Colors.white,
                        ),
                        Text("${snapshot.data!["data"][0]['name1']}"),
                        // ImageIcon(
                        //   AssetImage("assets/images/ball.png"),
                        //   size: 10,
                        //   color: Colors.red[800],
                        // )
                      ]),
                      Row(children: [
                        CircleAvatar(
                          backgroundImage: NetworkImage(
                              "${snapshot.data!["data"][0]['image_path2']}"),
                          backgroundColor: Colors.white,
                        ),
                        Text("${snapshot.data!["data"][0]['name2']}"),
                        ImageIcon(
                          AssetImage("assets/images/ball.png"),
                          size: 10,
                          color: Colors.red[800],
                        )
                      ]),
                    ],
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      CircleAvatar(
                        child: Text("vs"),
                        backgroundColor: Color(0xff38547C),
                        foregroundColor: Colors.white,
                        radius: 13,
                      ),
                    ],
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Column(
                        children: [
                          Text(
                            "${livescore['data'][0]['score1']}",
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          Row(
                            children: [
                              //overs
                              Text("overs" +
                                  "${livescore['data'][0]['overs1']}"),
                              Text(
                                "    " + "${livescore['data'][0]['wickets1']}",
                              ),
                            ],
                          ),
                        ],
                      ),
                      Column(
                        children: [
                          Text(
                            "${livescore['data'][0]['score2']}",
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          Row(
                            children: [
                              //overs
                              Text("overs" +
                                  "${livescore['data'][0]['overs2']}"),
                              Text(
                                " out " + "${livescore['data'][0]['wickets2']}",
                              ),
                            ],
                          ),
                        ],
                      )
                    ],
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text("${snapshot.data!['data'][0]['note']}"),
                ],
              ),
              Padding(
                padding: EdgeInsets.all(3),
              )
            ],
          );
        } else {
          return const Text('Network Error');
        }
      },
    );
  }

Image:

Answer 1

As you're using Rest APIs hence you would have to call your GET score API every certain duration (lets say 5 seconds). But I won't recommend you doing that as it would be a very costly solution.

Here is the code anyways:

 Timer timer;
 @override
  void initState() {
    timer = Timer.periodic(Duration(seconds: 30),(t){
      yourAPICallingFunction();
    });
    super.initState();
  }

Use timer.cancel() to cancel this subscription.

Usually the best way is to go with sockets or firebase approach in such Live Scoring apps so the data is automatically updated whenever there is a new update at remote.