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 {
Future track;
@override
Widget build(BuildContext context) {
double c_width = MediaQuery.of(context).size.width;
return new FutureBuilder(
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: [
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 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');
}
}
}
解决方案
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 {
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: [
Text(counter.toString())
],
),
),
);
}
}