Preview Picked Image in Flutter - flutter

Question

Hi I am using the image_picker package in flutter to pick images and store them to firestore.
I want to preview the image in a circle avatar before I actually upload it so how would I go about doing that?
This is the code I have to pick the image:
String imageUrl = '';
Future pickImage(ImageSource imageSource) async {
ImagePicker imagePicker = ImagePicker();
XFile? file = await imagePicker.pickImage(
source: imageSource);
if (file == null) return;
String uniqueFileName = DateTime
.now()
.millisecondsSinceEpoch
.toString();
//Getting a reference to storage root
Reference referenceRoot = FirebaseStorage.instance.ref();
Reference referenceDirImages = referenceRoot.child(
'images');
//Create a reference for the image to be stored
Reference referenceImageToUpload = referenceDirImages
.child(uniqueFileName);
try {
//Store the file
await referenceImageToUpload.putFile(File(file.path));
// Success: get download URL
imageUrl =
await referenceImageToUpload.getDownloadURL();
} catch (error) {
// Some error occurred
}
}
This is where I ask the user to pick the image either from the gallery or camera and then in the circle avatar I want them to preview the image before actually uploading it:
InkWell(
child: CircleAvatar(
backgroundColor: Colors.blue[900],
radius: 100,
),
onTap: () async {
return showDialog(context: context, builder: (context) {
return Center(
child: SizedBox(
height: 200,
child: AlertDialog(
backgroundColor: Colors.blue[900],
actionsPadding: const EdgeInsets.all(10.0),
content: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(onPressed: () {
pickImage(ImageSource.gallery);
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.white)
),
child: const Text("Gallery",
style: TextStyle(
color: Colors.black
),)),
const SizedBox(
height: 10,
),
ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.white)
),
onPressed: () {
pickImage(ImageSource.camera);
},
child: const Text("Camera", style: TextStyle(
color: Colors.black
),),
)
],
),
),
),
),
);
}
);
}
),
Thanks!

Answer 1

Well you need to separate your functions into sub-functions, but first I will create this variable:
File? imageFile;
then it should be a function that picks that image from the device and update the state of the imageFile variable we made.
Future pickImage(ImageSource imageSource) async {
ImagePicker imagePicker = ImagePicker();
XFile? file = await imagePicker.pickImage(source: imageSource);
if (file == null) return;
setState(() {
imageFile = File(file.path);
});
}
and a method that returns the widget which will show the actual image we pick:
Image genratePreviowWidget(File file) {
return Image.file(file);
}
and in your UI, you should show it under an if condition like this:
Column(
children: [
if(imageFile != null) genratePreviowWidget(imageFile ),
],
),
now you have a method that pick the image and show it directly in your UI after it's done.
forwe still have that imageFile, so you can simply upload it ( confirm uploading it) from a separate method:
Future confirmUpload(File file) async {
String uniqueFileName = DateTime.now().millisecondsSinceEpoch.toString();
//Getting a reference to storage root
Reference referenceRoot = FirebaseStorage.instance.ref();
Reference referenceDirImages = referenceRoot.child('images');
//Create a reference for the image to be stored
Reference referenceImageToUpload = referenceDirImages.child(uniqueFileName);
try {
//Store the file
await referenceImageToUpload.putFile(file);
// Success: get download URL
imageUrl = await referenceImageToUpload.getDownloadURL();
} catch (error) {}
}
and you will need to call it when you want to upload it like this:
confirmUpload(imageFile);