Flutter pdf download from server - node.js

Question

I am trying to download files from nodejs server. But when I implement onTap method on the gridview, it automatically runs the onTap function on start and every file starts downloading. I cannot figure out what am I doing wrong.Here is a preview of my code. I have implemented streambuilder to fetch the data.
GridView.builder(
padding: EdgeInsets.all(10),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
childAspectRatio: 0.9),
itemCount: snapshot.data.data.length,
itemBuilder: (context, i) {
return Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.blue.withOpacity(0.3)),
child: Column(
children: <Widget>[
Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage('assets/pdf_icon.png'))),
),
Divider(),
for (var items in snapshot.data.data[i].attachments)
ResourceDetail(
name: snapshot.data.data[i].title,
author: snapshot.data.data[i].user.name,
onTap: downloadFile(
'url/api/${items.source}',
snapshot.data.data[i].title,
items.extension),
),
],
),
);
},
);
Here is download file method.
Future<void> downloadFile(
String url, String fileName, String extension) async {
var dio = new Dio();
var dir = await getExternalStorageDirectory();
var downloadDir =
await new io.Directory('${dir.path}/downloads').create(recursive: true);
io.File('${downloadDir.path}/$fileName.$extension').exists().then((a) async {
print(a);
if (a) {
print("Opening file");
showDialog(
context: context,
builder: (_) {
return AlertDialog(
backgroundColor: Color(0xff5b8c85),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
title: Text('File is already downloaded'),
actions: <Widget>[
FlatButton(
child: Text(
'Open',
style: TextStyle(color: Colors.white),
),
onPressed: () {
OpenFile.open('${downloadDir.path}/$fileName.$extension');
Navigator.pop(context);
})
],
);
});
return;
} else {
print("Downloading file");
openDialog();
await dio.download(url, '${downloadDir.path}/$fileName.$extension',
onReceiveProgress: (rec, total) {
if (mounted) {
setState(() {
progressValue = (rec / total);
progressString = ((rec / total) * 100).toStringAsFixed(0) + "%";
myDialogState.setState(() {
myDialogState.progressData = progressString;
myDialogState.progressValue = progressValue;
});
});
}
});
if (mounted) {
setState(() {
print('${downloadDir.path}');
});
}
print("Download completed");
}
});
}

Answer 1

The ResourceDetails in your GridView.builder, try replacing the onTap to this
onTap: ()=>downloadFile(
'url/api/${items.source}',
snapshot.data.data[i].title,
items.extension)