Retrieve realtime data from firebase - firebase

Question

I have a flutter project set up to receive moisture sensor data from firebase. I am uploading data to firebase and trying to retrieve it on my app but it only retrieves data after some time. Moreover, the value is null till then. And also, when changed there is no change in data on the app. How do I get the data so that it shows data from the moment I start the app and changes when data on the firebase updates? Here is my code.
double moistureData;
#override
bool _isLoading = false;
void initState() {
super.initState();
databaseReference.child('Data').once().then((DataSnapshot snapshot) {
int moisture = snapshot.value['Moisture'];
moistureData = moisture.toDouble();
print(moisture);
setState(() {
if (moistureData != null) {
_isLoading = true;
}
});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Moisture'),
),
body: StreamBuilder(
stream: databaseReference.child('Data').child('Moisture').onValue,
builder: (context, snapshot) {
if (!snapshot.hasData) {
return CircularProgressIndicator();
} else {
return Center(
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text('$moistureData'),
RaisedButton(
child: Text('Refresh'),
onPressed: () {
setState(() {
databaseReference
.child('Data')
.once()
.then((DataSnapshot snapshot) {
int moisture = snapshot.value['Moisture'];
moistureData = moisture.toDouble();
});
});
},
)
],
),
),
);
}
}));

Answer 1

of course, it takes some time to load data from firebase, create one bool variable and set it false.
double moistureData;
bool _isLoading=false;
#override
void initState() {
super.initState();
databaseReference.child('Data').once().then((DataSnapshot snapshot) {
final int moisture = snapshot.value['Moisture'];
moistureData=moisture.toDouble();
print(moisture);
setState((){
if(moistureData!=null)
_isLoading=true;
});
});
}
And inside your widget pass, circular progress indicator or an empty container when _isLoading is false. when it's true called your widget inside else.

Answer 2

To listen for both the current value and updates, you need to observe one of the on... stream properties of the query object. The closest to your current code is onValue stream.
An example from the FlutterFire example app:
_counterRef.onValue.listen((Event event) {
setState(() {
_error = null;
_counter = event.snapshot.value ?? 0;
});
}
So you see that this also uses the setState(...) that #satish's answer explains.