Flutter: Restrict calling build method many times - firebase

Question

I am implementing a chat application where users can share images. Each image is a stateful widget and each of them should get uploaded to the Firebase Storage as well.
My problem is, this flow works fine at the beginning of the app but when you upload another image, instead of the a single file, now 2 files are getting uploaded (1 new file and the file from the previous message).
I am pretty sure that this is something to do with keys so I provide an instance of UniqueKey as well but the problem is still there.
Let me explain my implementation and then provide the code:
I have 2 files; one is the chat screen, and the other one is a single message chip.
Chat screen keeps a list of message chips and does the rendering accordingly.
Message chip is stateful because, I want the user to see a progress while it is being uploaded to the server. After picking up a file from the device, an instance of message chip will get pushed to the array in the chat screen.
My code for the attach pic button in chat screen:
IconButton(
icon: Icon(Icons.attach_file),
onPressed: () async {
final File _file = await ImagePicker.pickImage(
source: ImageSource.gallery);
if (_file != null) {
//appending to the messages list
final sss = new MediaMessage(
key: UniqueKey(),
file: _file,
isImage: true,
threadId: widget._threadId,
);
setState(() {
_messages.add(sss);
});
}
},
)
and here is the code in my message chip file (including only the essentials)
void initState() {
super.initState();
//creating a file name eg: img_456985.jpg
final rand = Math.Random().nextInt(10000);
final fileExt = widget.file.path
.substring(widget.file.path.lastIndexOf('.'), widget.file.path.length);
_fileName = 'image_$rand$fileExt';
final StorageReference storeRef = FirebaseStorage.instance
.ref()
.child('threads')
.child(widget.threadId)
.child(_fileName);
final uploadTask = storeRef.putFile(widget.file);
uploadTask.events.listen((event) {
setState(() {
_uploadPercentage = event.snapshot.bytesTransferred.toDouble() /
event.snapshot.totalByteCount.toDouble();
});
print(_uploadPercentage);
});
uploadTask.onComplete.then((snapshot) {
setState(() {
_uploadStatus = UploadProgressStatus.complete;
});
});
}
Here is a demo GIF of this issue:
GIF image demo
Any suggestions/solutions would be appreciated.
Thank you

Answer 1

Null the file value after image uploading task might work.
like
widget.file=null
place it after uploadTask