How to display image automatically when it's picked (flutter) - firebase

Question

when I upload an Image using firebase storage, it doesn't show in the screen until I do hot refresh. So the question is: How to show it automatically when I pick it either from the gallery or the camera? Thanks.
Codes:
late File file;
var imagePicker = ImagePicker();
var imgUrl;
var refStorage;
uploadPosterImage() async {
var pickedImage = await imagePicker.getImage(source: ImageSource.gallery);
if (pickedImage != null) {
setState(() {
file = File(pickedImage.path);
});
var imageName = basename(pickedImage.path);
var rand = Random().nextInt(10000000);
imageName = "$rand$imageName"; // random number + image name
refStorage = FirebaseStorage.instance.ref("items/$imageName");
await refStorage.putFile(file);
imgUrl = await refStorage.getDownloadURL();
}
}
------- and that's the code in the body:
Container(
margin: EdgeInsets.only(bottom: 10),
height: 230,
width: 160,
decoration: BoxDecoration(
border: Border.all(color: Colors.yellow),
borderRadius: BorderRadius.circular(20)),
child:
//imgUrl==null?
InkWell(
onTap: ()async{
await uploadPosterImage();
},
child: imgUrl == null? _icon : Image(image: NetworkImage(imgUrl),) )
),

Answer 1

Try below code hope its help to you.
File? imagePicked;
void cameraImage() async {
final picker = ImagePicker();
final pickedImage = await picker.pickImage(
source: ImageSource.camera,
);
final pickedImageFile = File(pickedImage!.path);
setState(() {
imagePicked = pickedImageFile;
});
Navigator.pop(context);
}
void gallaryImage() async {
final picker = ImagePicker();
final pickedImage = await picker.pickImage(
source: ImageSource.gallery,
);
final pickedImageFile = File(pickedImage!.path);
setState(() {
imagePicked = pickedImageFile;
});
Navigator.pop(context);
}
Your Widget:
Stack(
children: [
Container(
margin: EdgeInsets.all(8),
child: CircleAvatar(
radius: 71,
backgroundColor: Colors.black,
child: CircleAvatar(
backgroundColor: Colors.white,
radius: 69,
backgroundImage: imagePicked == null
? null
: FileImage(
imagePicked!,
),
),
),
),
Positioned(
left: 90,
top: 90,
child: RawMaterialButton(
fillColor: Theme.of(context).backgroundColor,
padding: EdgeInsets.all(10),
shape: CircleBorder(),
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text(
'Choose Option',
),
content: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextButton.icon(
onPressed: cameraImage,
label: Text(
'Camera',
style: TextStyle(
color: Colors.black,
),
),
icon: Icon(
Icons.camera,
),
),
TextButton.icon(
onPressed: gallaryImage,
label: Text(
'Gallery',
style: TextStyle(
color: Colors.black,
),
),
icon: Icon(Icons.image),
),
],
),
),
);
},
);
},
child: Icon(
Icons.add_a_photo,
),
),
),
],
),
Your screen before image select:
Your screen after image select: