I have implemented a feature that allows users to upload files to the server.
The user selects a file on the device. if image, displays a preview on the screen. and uploads it to the server.
When showing a preview, use Image.file() to display it.
But it's too slow. When I select multiple images, the app sometimes crashes while drawing a preview.
In my opinion, retrieving images from the file system seems to consume too much resources.
Is there any alternative?
The code below is the build method that does the work.
@override
Widget build(BuildContext context) {
String mimeStr = lookupMimeType(widget.file.filePathInLoacl);
String fileType = mimeStr.split('/').first;
return Consumer<FileUploadController>(
builder: (context, fileUploadController, child) => Container(
margin: const EdgeInsets.all(5.0),
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey[300]),
borderRadius: BorderRadius.circular(5),
),
child: Row(
children: [
if (fileType != 'image')
Stack(
children: [
CircularProgressIndicator(
value: widget.file.uploadPercentage,
strokeWidth: widget.file.uploadPercentage == 1 ? 0 : 1,
),
Positioned(
right: 3,
left: 3,
top: 3,
bottom: 3,
child: CircleAvatar(
maxRadius: 16,
backgroundColor: Colors.white,
child: Container(
width: 12,
height: 13.33,
child: getUploadFileIcon(fileType),
),
),
),
],
),
if (fileType == 'image')//problem...!!
Container(
width: 50,
height: 50,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.file(
File(widget.file.filePathInLoacl),
fit: BoxFit.cover,
),
),
),
SizedBox(
width: 10,
),
Container(
width: MediaQuery.of(context).size.width * 0.65,
child: Text(widget.fileName),
),
Spacer(),
IconButton(
icon: Icon(Icons.close),
onPressed: () {
widget.removeWhenCloseButtonTap(widget.file);
},
),
],
),
),
);
}
}
