How to display something while the value is null/loading in Flutter? - flutter

Question

I've created a real-time object detection with Tiny YOLOv2 using Flutter app. So far the app managed to detect the object and display its bounding box with the detectedClass and confidence. Then I pulled the detectedClass (the name of the object) and assigned it into my String _result variable because I need it to fetch data from Firebase later.
The main issue is when the app is not detecting anything I want to display something like maybe 'Loading...' until the _result return the name of the object bcus u see my custom Tiny YOLOv2 takes a lil bit of time before it detect the object. Then, I want to fetch data based on _result from the Firebase. So far, I've managed to fetch the data from the Firebase BUT ONLY if I hardcoded the name of the object detected. Otherwise the app would return null error if I'm fetching using _result variable.
Below is my attempt of displaying the the name of the food and its calorie (which is fetched from the Firebase) based on the _result variable but FAILED:
return MaterialApp(
debugShowCheckedModeBanner: false,
home: SafeArea(
child: Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image:AssetImage('assets/back.jpg'), fit: BoxFit.fill),
),
child: Column(
children: [
Stack(
children: [
Center(
child: Container(
margin: EdgeInsets.only(top: 10),
// child: Icon(Icons.photo_camera, color: Colors.orange, size: 40),
child: Text('Press on the camera icon',
style: TextStyle(
fontSize: 16.0,
color: Colors.orangeAccent,
fontWeight: FontWeight.bold
),
textAlign: TextAlign.center,
),
),
),
Center(
child: FlatButton(
onPressed: ()
{
initCamera();
},
child: Container(
margin: EdgeInsets.only(top: 35),
height: 270,
width: 360,
color: Colors.orange,
child: Stack(
children: list,
),
),
),
),
],
),
Center(
child: Container(
margin: EdgeInsets.only(top: 45.0),
child: SingleChildScrollView(
child: FutureBuilder(
future: dbRef.orderByChild("food_name").equalTo(_result).once(),
builder: (context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Center(
child: Text("Loading..."),
);
} else {
lists.clear();
Map<dynamic, dynamic> values = snapshot.data.value;
values.forEach((key, values) {
lists.add(values);
});
return ListView.builder(
shrinkWrap: true,
itemCount: lists.length,
itemBuilder: (BuildContext context,
int index) {
return
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment
.start,
children: <Widget>[
Text("Name: " + lists[index]["food_name"]),
Text("Calorie: " + lists[index]["calorie"]),
],
),
);
});
}
})
),
),
),
],
),
),
),
),
);
}
}
The error from the above is:
Exception has occurred.
NoSuchMethodError (NoSuchMethodError: The method 'forEach' was called on null.
Receiver: null
Tried calling: forEach(Closure: (String, dynamic) => Null))
My issue is kinda similar with this user and the solution in there is not working in my case.
I dont know whether its possible to fetch the data from firebase based on the real time input? Otherwise how do I save the name of the object somewhere to make it static(?) I'm really new to Flutter so some guidance on how to code it is very much appreciated. Thank you in advance.
Edited Btw just want to add it here. This is how I declared my _result:
_recognitions.forEach((response)
{
_result = "${response["detectedClass"]}" + "\n\n";
});
Basically _result is just the name of the object detected.

Answer 1

Just wanna share how I resolved this in case anyone's having the same issue. All I did is just insert a while (values == null) inside my else statement like this:
else {
values = snapshot.data.value;
while (values == null){
return Center(
child: CircularProgressIndicator(color: Colors.orange),
);
}
lists.clear();
values.forEach((key, values){
lists.add(values);
});
}
and then followed by the ListView.builder() to display them.
Btw, thank you so much for those who responded!