How to make UI realtime update - mysql

Question

I have a problem to make UI in flutter still update in realtime, I got the data from JSON web, made by node JS and MySQL.
Here my UI looks like. Image Shown null
I don't know why it happens. at first, navigate to that page it appears null, then I back to the previous page and do the same way, and it works the data appears. Image shows Data
My question is how to make the data always update in realtime?
here my code
import 'package:crophero/detail.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:crophero/home_page.dart';
import 'package:crophero/login_page.dart';
import 'package:crophero/api_provider.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';
import 'dart:io';
class SensorPage extends StatefulWidget {
SensorPage({Key key, this.id, this.gh, this.idgh, this.namagh})
: super(key: key);
final int id;
final int idgh;
final String namagh;
final List gh;
static String tag = 'sensor-page';
#override
_SensorPageState createState() => new _SensorPageState();
}
Timer timer;
int suhu;
int rh;
int cahaya;
int air;
int tanah;
int angin;
class _SensorPageState extends State<SensorPage> {
Future loadSensor() async {
var jsonString = await http
.get('$endPoint/data_realtime?user_id=$id&&gh_id=${widget.idgh}');
final jsonResponse = json.decode(jsonString.body);
setState(() {
suhu = jsonResponse['suhu'];
rh = jsonResponse['rh'];
cahaya = jsonResponse['cahaya'];
air = jsonResponse['air'];
tanah = jsonResponse['tanah'];
angin = jsonResponse['angin'];
});
}
#override
void initState() {
super.initState();
loadSensor();
_buatlist();
}
#override
void dispose() {
super.dispose();
timer.cancel();
}
List<Container> daftarSensor = new List();
var karakter = [
{
"nama": "Air Temperature",
"gambar": "temp.png",
"warna": 0xFFD50000,
"nilai": "$suhu *C"
},
{
"nama": "Relative Humidity",
"gambar": "rh.png",
"warna": 0xFF33691E,
"nilai": "$rh %"
},
{
"nama": "Water Temperature",
"gambar": "water.png",
"warna": 0xFF0288D1,
"nilai": "$air *C"
},
{
"nama": "Light Intensity",
"gambar": "light.png",
"warna": 0xFFFFAB00,
"nilai": "${cahaya} lux"
},
{
"nama": "Soil Moisture",
"gambar": "soil.png",
"warna": 0xFF795548,
"nilai": "$tanah"
},
{
"nama": "Wind Velocity",
"gambar": "wind.png",
"warna": 0xFF00695C,
"nilai": "${angin} m/s"
},
];
_buatlist() async {
for (var i = 0; i < karakter.length; i++) {
final karakternya = karakter[i];
final data = karakter[i];
final String gambar = karakternya["gambar"];
daftarSensor.add(
new Container(
padding: new EdgeInsets.all(10.0),
child: new Column(
children: <Widget>[
new Material(
child: new Column(
children: <Widget>[
MaterialButton(
minWidth: 200.0,
height: 75.0,
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new Detail(
gambar: karakternya["gambar"],
warna: karakternya["warna"],
nilai: data["nilai"],
nama: karakternya["nama"],
idgh: widget.idgh,
namagh: widget.namagh,
)));
},
child: Column(
children: <Widget>[
Row(
children: <Widget>[
new Image.asset(
"img/$gambar",
fit: BoxFit.cover,
width: 50,
),
SizedBox(width: 130),
Text((karakternya["nilai"]),
style: TextStyle(
color: Colors.white,
fontSize: 25,
),
textAlign: TextAlign.left),
],
),
Text((karakternya["nama"]),
style: TextStyle(
color: Colors.white,
fontSize: 14,
),
textAlign: TextAlign.end),
],
),
)
],
),
color: Color(karakternya["warna"]),
borderRadius: BorderRadius.circular(20),
),
],
),
),
);
}
}
#override
Widget build(BuildContext context) {
return new Scaffold(
bottomNavigationBar: Container(
height: 50,
child: BottomAppBar(
color: Colors.green[900],
child: new Center(
child: new Row(
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 50.0),
),
],
),
),
),
),
backgroundColor: Colors.white,
appBar: new AppBar(
backgroundColor: Colors.green[900],
title: new Text(
"${widget.namagh} ",
style: new TextStyle(color: Colors.white),
),
),
body: new ListView(
children: daftarSensor,
),
);
}
}

Answer 1

It's showing null because the states not updated yet. Once you re-enter this page, it calls build() and will apply updated state(which is previously assigned from loadSensor()), so it's showing correctly.
What I noticed from your code, there is no guarantee that _buatlist() will be called after loadSensor(). Since _buatlist() is expecting to see newly updated value from loadSensor(), they should work asynchronously.
So try put daftarSensor to your state group, and once new items loaded from loadSensor(), call _buatlist() to build dafterSensor and also call setState inside of _buatlist(), then it will update ListView.