Flutter: Unable to refetch image after updated image in Firebase - flutter

Question

Previously in my log in page, I prompted user to upload a profile image, then the user is able to edit their profile picture by re-upload another new profile image. However, once the user selected the new image, the link is able to update on the Firebase side but the new link image requires hot reload in order to reflect the new image on the page. Anyone knows a better solution to it? My pick image function:
Future pickImage(ImageSource source) async {
try {
final image = await ImagePicker().pickImage(source: source);
if (image == null) return;
setState(() => _imageFile = File(image.path));
String fileName = Path.basename(_imageFile!.path);
Reference firebaseStorageRef =
FirebaseStorage.instance.ref().child('$fileName');
await firebaseStorageRef.putFile(File(image.path));
setState(() async {
imageUrl = await firebaseStorageRef.getDownloadURL();
await FirebaseFirestore.instance
.collection('MerchantData')
.doc(widget.currentUser?.uid)
.update({"shopLogo": imageUrl}).then((value) => {
showFlash(
context: context,
duration: const Duration(seconds: 2),
builder: (context, controller) {
return Flash.bar(
controller: controller,
backgroundColor: Colors.green,
position: FlashPosition.top,
child: Container(
width: MediaQuery.of(context).size.width,
height: 70,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Shop Logo Updated Successfully",
style: const TextStyle(
color: Colors.white,
fontSize: 18,
),
),
],
)),
);
},
)
});
});
} on PlatformException catch (e) {
print("Failed to pick image: $e");
}
}
Here is the FutureBuilder I used to display the image:
FutureBuilder(
future: getData(),
builder: (BuildContext context, snapshot) {
imageUrl = (snapshot.data as Map<String, dynamic>)['shopLogo'];
if (snapshot.hasData) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator(),
],
);
} else {
return Column(children: [
Container(
margin: EdgeInsets.fromLTRB(0, 10.0, 0, 20),
child: CircleAvatar(
radius: 50.0,
child: ClipRRect(
child: Image(
height: 100,
width: 100,
image: NetworkImage(imageUrl),
fit: BoxFit.fill,
),
borderRadius: BorderRadius.circular(50.0),
),
),
),
GestureDetector(
onTap: () {
showMyDialog();
},
child: Container(
margin: EdgeInsets.fromLTRB(0, 0, 0, 30),
child: Text(
"Change Logo Photo",
style: const TextStyle(
color: Colors.blue,
fontSize: 16,
),
),
),
),
]);
}
} else if (snapshot.hasError) {
return Text('no data');
}
return CircularProgressIndicator();
},
),
and here is my getData() function:
getData() async {
var firestore = FirebaseFirestore.instance;
DocumentSnapshot qn = await firestore
.collection('MerchantData')
.doc(widget.currentUser?.uid)
.get();
return qn.data();
}