Flutter refresh JSON every minute automatically

Question

I have searched the web for auto refresh widgets and auto refresh future JSON for Flutter but the results all seem to be for pull down refresh.

What I need is like a function that I can call and every minute that said function repeats.

I know I have to integrate something like:

var future = new Future.delayed(const Duration(milliseconds: 10), TracksWidget());

However I am not sure where I need to put it.

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import '../model/track.dart';

class TracksWidget extends StatefulWidget {
  @override
  _TracksWidgetState createState() => _TracksWidgetState();
}

class _TracksWidgetState extends State<TracksWidget> {
  Future<Track> track;

  @override
  Widget build(BuildContext context) {
    double c_width = MediaQuery.of(context).size.width;
    return new FutureBuilder<Track>(
      future: track,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          Track track = snapshot.data;
          return new Container(
              padding: const EdgeInsets.all(16.0),
              width: c_width,
              child: new Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                        Image.network(track.imageurl, width:200.0, height: 200.0,fit: BoxFit.cover),
                        Text(track.title),
                        Text(track.artist),
              ]),
          );
        } else if (snapshot.hasError) {
          return Text("${snapshot.error}");
        }
        //By default, show a loading spinner.
        return CircularProgressIndicator();
      },
    );
  }

  @override
  void initState() {
    super.initState();
    track = fetchTrack();
  }


  Future<Track> fetchTrack() async {
    final response =
        await http.get('http://139.59.108.222:2199/rpc/drn1/streaminfo.get');

    if (response.statusCode == 200) {
      // If the call to the server was successful, parse the JSON.
      var responseJson = json.decode(response.body);
      // assume there is only one track to display
      // SO question mentioned 'display current track'
      var track = responseJson['data']
          .map((musicFileJson) => Track.fromJson(musicFileJson['track']))
          .first;
      return track;
    } else {
      // If that call was not successful, throw an error.
      throw Exception('Failed to load post');
    }
  }
}

Answer 1

The simplest way to do this I have found is to use the Timer function.

If you put the timer into initState it will start when the the app is started. In the code below, the timer will call the addValue() method every 5 seconds which increases the value by one each time. Just remember to dispose of the timer when you have finished with it.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  Timer timer;
  int counter = 0;

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

  void addValue() {
    setState(() {
       counter++; 
    });
  }

  @override
  void dispose() {
    timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(counter.toString())
          ],
        ),
      ),
    );
  }
}