Blank Screen when fetching data from api - node.js

Question

I am fetching a data from api and display it in list using ListView builder, it's working properly on emulator but when I run app on my android phone it is displaying blank screen, here it looks.
below Leave History label, I am displaying data from api, but it looks like this now.
It looks like this on emulator
Here is the code:
Fetching api data and inserting it into list
List<leaveHistory> historyList = [];
var loader = 0;
Future<List<leaveHistory>> _getRecord() async {
Dio dio = new Dio();
var data = {
'username': getname,
'token': getaccesstoken,
};
return dio
.post(localhostUrlLeaveHistoryON, data: json.encode(data))
.then((onResponse) async {
Map<String, dynamic> map = onResponse.data;
List<dynamic> data = map["data"];
for (var historyData in data) {
leaveHistory history = leaveHistory(
historyData["Date"],
historyData["description"],
historyData["type"],
historyData['fromdate'],
historyData["todate"],
historyData["noofleavedays"],
historyData["leave"]);
historyList.add(history);
loader = 0;
}
if (historyList.length == 0) {
loader = 1;
}
return historyList;
}).catchError((onerror) {
loader = 1;
print(onerror.toString());
});
}
display the data using ListView.builder
Widget build(BuildContext context) {
return Scaffold(
appBar: new MyAppBar(
title: Text("Leaves Tracker"),
onpressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => Profile()));
}),
drawer: NavigationDrawerWidget(),
body: Stack(overflow: Overflow.visible, children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(20, 10, 0, 0),
child: Text(
"Leave History",
style: TextStyle(fontSize: 30, fontFamily: 'RaleWay'),
),
),
Container(
padding: EdgeInsets.fromLTRB(10, 30, 0, 0),
child: FutureBuilder(
future: _getRecord(),
builder: (BuildContext context,
AsyncSnapshot<List<leaveHistory>> snapshot) {
if (snapshot.hasData) {
if (historyList.length != 0) {
return Container(
padding: EdgeInsets.fromLTRB(0, 30, 0, 0),
child: Expanded(
child: ListView.builder(
itemCount: snapshot.data.length,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
Color c = Colors.red;
//changing the avatar color
if (i == 0)
i++;
else if (i == 1) {
c = Colors.blue;
i++;
} else if (i == 2) {
c = Color(int.parse(annualboxcolor));
i = 0;
}
Color c1 = Colors.green;
if (snapshot.data[index].Status == "Approved") {
c1 = Colors.green;
} else if (snapshot.data[index].Status ==
"Not Approved") {
c1 = Colors.red;
} else if (snapshot.data[index].Status ==
"Pending") {
c1 = Color(int.parse(pendingrequestcolor));
}
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: [
ListTile(
leading: CircleAvatar(
radius: 25,
backgroundColor: c,
child: Container(
padding: EdgeInsets.fromLTRB(
0, 10, 0, 0),
child:
Column(children: <Widget>[
Text(
snapshot
.data[index].noofdays
.toString(),
style: TextStyle(
fontSize: 15.0,
fontWeight:
FontWeight.bold,
color: Colors.white),
),
Text(
int.parse(snapshot
.data[index]
.noofdays) >
1
? "Days"
: "Day",
style: TextStyle(
fontSize: 10.0,
color: Colors.white),
)
]),
)),
title:
Text(snapshot.data[index].type),
isThreeLine: true,
subtitle: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
snapshot.data[index].fromdate +
" To " +
snapshot.data[index].todate,
),
Text(snapshot.data[index].Status,
style: TextStyle(
color: c1,
fontWeight:
FontWeight.bold)),
Text(
snapshot
.data[index].description,
)
],
)),
Divider(
color: Colors.grey,
height: 10,
),
],
));
},
)));
}
}
if (loader == 1) {
print("run");
return Nodatafound();
} else {
return Center(
child: CircularProgressIndicator(
color: Colors.blue[500],
));
}
}),
),
]));
}
}
history class
class leaveHistory {
final String date;
final String fromdate;
final String todate;
final String description;
final String type;
final String Status;
final String noofdays;
leaveHistory(this.date, this.description, this.type, this.fromdate,
this.todate, this.noofdays, this.Status);
}
When i redirect to this screen from drawer it first display this error
DioError [DioErrorType.response]: Http status error [300]
on this catchError this line print(onerror.toString());
Update:
When i connect my phone with my laptop with datacable, it's working fine, but when i install apk problem occurs.
Please help where i am doing wrong.

Answer 1

If #Huthaifa was not the answer you're looking, have you tried to update the value of: localhostUrlLeaveHistoryON?
If you're using something like: http://localhost
Please try to change this to your computer's ip address.

Answer 2

Your error is caused by incorrect use of parent data widget. And that is from using expanded inside container. Remove your Expanded from here:
return Container(
padding: EdgeInsets.fromLTRB(0, 30, 0, 0),
child: Expanded(
child: ListView.builder(
You will also notice that the error in console is gone. Always read the errors and understand them. The error will 100% say, incorrect use of parent widget. Just remove the expanded.