I have a listview with data from my JSON API which works perfectly but I have a scenario I will like to work around, it is basically payment progress that is meant to show a list of paid users and add to the list dummy widget to the list indicating the number of users left to pay. Below API returns information about users and the number of users left to pay but I can't find how to add a dummy widget to the list view to show the number of users left.
var numberOfUserLeft;
List data;
Future<String> getData() async {
isLoadingActivity = true;
String url;
url = "mylink.php";
var response = await http.get(
Uri.encodeFull(url),
headers: {
"Accept": "application/json"
}
);
this.setState(() {
data = json.decode(response.body);
isLoadingActivity = false;
numberOfUserLeft = data[0]['userCount']
});
return "Success!";
}
// my listview below
ListView.builder(
scrollDirection: Axis.horizontal,
// padding: EdgeInsets.all(5.0),
itemCount: data == null
? 0
: data.length,
itemBuilder: (context, position) {
return Container(
padding: EdgeInsets.all(10),
child: Row(children: [
Container(
padding: EdgeInsets.all(4),
child: Stack(
clipBehavior: Clip.none,
children: [
CircleAvatar(
radius: 60,
backgroundColor: colorGreen,
child:Container(
padding: EdgeInsets.all(4),
margin: EdgeInsets.all(3),
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
child: ClipOval(
child: Container(
height: 250,
width: 250,
child: data[position]["profile_img"]!=null?Image.network(
data[position]["profile_img"],
fit: BoxFit.cover,
):Image.asset("assets/person_icon.png"),
),
)
)),
Positioned(
bottom: 100,
right: 45,
child: InkWell(
onTap: () {},
child: Center(
child: CircleAvatar(
backgroundColor: colorGreen,
radius: 15.0,
child: Icon(
Icons.check,
color: Colors.white,
size: 25,
),
),
),
),
),
],
),
),
Container(
padding: EdgeInsets.all(4),
child: Stack(
clipBehavior: Clip.none,
children: [
CircleAvatar(
radius: 60,
backgroundColor: colorGreen,
child:Container(
padding: EdgeInsets.all(4),
margin: EdgeInsets.all(3),
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
child: ClipOval(
child: Container(
height: 250,
width: 250,
child: data[position]["profile_img"]!=null?Image.network(
data[position]["profile_img"],
fit: BoxFit.cover,
):Image.asset("assets/person_icon.png"),
),
)
)),
Positioned(
bottom: 100,
right: 45,
child: InkWell(
onTap: () {},
child: Center(
child: CircleAvatar(
backgroundColor: colorGreen,
radius: 15.0,
child: Icon(
Icons.check,
color: Colors.white,
size: 25,
),
),
),
),
),
],
),
),
],))
;
})
The above API returns only one user to have paid ow can I use numberOfUserLeft to create a dummy widget in Listview, Find the attached screenshot of what I'm looking at:
