Show downloading progress bar only on one particular card in listview - flutter

Question

I have implemented a listview.builder and i want to download a video file when pressed on the download icon and show the download progress bar only on that particular card.
Can't figure a way to do that.Any help would be great!!
I am getting the following when pressed on first card's download icon:
This is the code:
String downloadMessage = ' ';
bool _isDownloading = false;
Widget checkid(int index){
if(widget.data[index]["unit_id"].toString() == widget.unitid){
return articles(index);
}
}
Container articles(int index){
return Container(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
GestureDetector(
child: Card(
child: Padding(
padding: const EdgeInsets.only(top: 20.0, bottom: 20, left: 13.0, right: 22.0),
child: Row(
children: <Widget>[
Column(
children: <Widget>[
Text(widget.data[index]["video_size"]+" MB"),
IconButton(
icon: Icon(Icons.file_download),
onPressed: () async {
_index = index;
bool exist = await db.checkdataid(widget.data[index]["data_video_id"]);
print(exist);
if(exist == false){
VideoDetails videoDetail = new VideoDetails(data_id: widget.data[index]["data_video_id"]);
await networkUtils.videodetail(url,body:videoDetail.toMap());
}
String videopath = await db.getvideopath();
videourl = baseurl + videopath;
print(videourl);
setState(() {
_isDownloading = !_isDownloading;
});
var dir = await getApplicationDocumentsDirectory();
Dio dio = Dio();
dio.download(
videourl,
'${dir.path}/sample.ehb',
onReceiveProgress: (actualbytes , totalbytes){
var percentage = actualbytes/totalbytes * 100;
setState(() {
downloadMessage = 'Downloading ${percentage.floor()} %';
});
}
);
}
),
Text(downloadMessage ?? '',style: TextStyle(fontSize: 12),)
],
),
Container(
width: 300,
child: Text(widget.data[index]["topic_name"],
style: TextStyle(fontSize: 15),
textAlign: TextAlign.start,),
),
],
),
),
),
onTap: () {},
)
],
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.indigo[700],
body: ListView(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 110, 0),
child: Container(
padding: EdgeInsets.fromLTRB(0, 30, 200, 0),
child: IconButton(icon: Icon(Icons.arrow_back),
color: Colors.black,
onPressed: (){
Navigator.pop(context);
},
),
),
),
SizedBox(height: 10,),
Text(" ",
style: TextStyle(color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold),
),
Text("Unit " + widget.unitno,
style: TextStyle(color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold),
),
SizedBox(height: 10,),
Text('',
style: TextStyle(color: Colors.white,
fontSize: 17),
),
],
),
SizedBox(height: 40,),
Container(
// height: MediaQuery.of(context).size.height - 185,
decoration: BoxDecoration(
color: Colors.white70,
borderRadius: BorderRadius.only(topLeft: Radius.circular(75.0),),
),
child: Padding(
padding: EdgeInsets.fromLTRB(0, 100, 0, 70),
child: ListView.builder(
physics: ScrollPhysics(),
shrinkWrap: true,
itemCount: widget.data.length,
itemBuilder: (BuildContext context,int index){
return Container(
child: checkid(index),
);
}),
),
)
],
),
);
}
}

Answer 1

first you need to refactor the widget that you return inside the articles method to its own Statefull widget which has knowledege of its download or not, like so
class ListItem extends StatefulWidget {
final int index;
dynamic item;
ListItem({
this.index,
this.item,
});
#override
_ListItemState createState() => _ListItemState();
}
class _ListItemState extends State<ListItem> {
bool _isDownloading = false;
String downloadMessage = "";
#override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
GestureDetector(
child: Card(
child: Padding(
padding: const EdgeInsets.only(
top: 20.0, bottom: 20, left: 13.0, right: 22.0),
child: Row(
children: <Widget>[
Column(
children: <Widget>[
Text(item["video_size"] + " MB"),
IconButton(
icon: Icon(Icons.file_download),
onPressed: () async {
_index = index;
bool exist = await db.checkdataid(
item["data_video_id"]);
print(exist);
if (exist == false) {
VideoDetails videoDetail = new VideoDetails(
data_id: widget.data[index]
["data_video_id"]);
await networkUtils.videodetail(url,
body: videoDetail.toMap());
}
String videopath = await db.getvideopath();
videourl = baseurl + videopath;
print(videourl);
setState(() {
_isDownloading = !_isDownloading;
});
var dir =
await getApplicationDocumentsDirectory();
Dio dio = Dio();
dio.download(videourl, '${dir.path}/sample.ehb',
onReceiveProgress:
(actualbytes, totalbytes) {
var percentage =
actualbytes / totalbytes * 100;
setState(() {
downloadMessage =
'Downloading ${percentage.floor()} %';
});
});
}),
Text(
downloadMessage ?? '',
style: TextStyle(fontSize: 12),
)
],
),
Container(
width: 300,
child: Text(
item["topic_name"],
style: TextStyle(fontSize: 15),
textAlign: TextAlign.start,
),
),
],
),
),
),
onTap: () {},
)
],
),
),
);
}
}
and when you render them inside the parent widget like so
Widget checkid(int index){
if(widget.data[index]["unit_id"].toString() == widget.unitid){
return articles(index);
}
}
Widget articles(index) {
return ListItem(
index: index,
item: widget.data[index]
);
}
}
now, each item has its own downloading state and will not interfere with the others