How to preview picked image on Flutter - flutter

Question

how to preview an image is to be chosen from gallery or camera in flutter with the new version of image_picker where
PickedFile image = await _picker.getImage(...)
is replace with
final XFile? photo = await _picker.pickImage(source: ImageSource.camera);
so photo must be displayed when it is selected properly

Answer 1

You can do it by using dialog in flutter.
Here is how I dealt with it.
onLongPress: () {
showDialog(
context: context,
builder: (ctx) {
final width = ctx.getWidth(1);
final height = ctx.getHeight(1);
return AlertDialog(
content: Stack(
children: [
SizedBox(
width: width * 0.9,
height: height * 0.7,
child: Image.network(
food.imageUrl,
fit: BoxFit.fill,
),
),
GestureDetector(
onTap: () => Navigator.pop(context),
child: Padding(
padding: const EdgeInsets.all(3.0),
child: Container(
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.5),
shape: BoxShape.circle),
child: Icon(
CupertinoIcons.xmark_circle,
color: Colors.white.withOpacity(0.9),
size: 40,
),
),
),
)
],
),
insetPadding: EdgeInsets.zero,
contentPadding: EdgeInsets.zero,
clipBehavior: Clip.antiAliasWithSaveLayer,
);
},
);
},

Answer 2

You can preview image which you select from gallery or camera as below :
Image.file(
File("file path will be here"), // You can access it with . operator and path property
fit: BoxFit.cover,
)

Answer 3

convert to file:
File newPhoto = File(photo.path);
Use:
Image.file(newPhoto);

Answer 4

I used image_pickers package much easier
late File imageFile = File("");
bool isloaded = false;
ElevatedButton(
onPressed: () => pickImageFromCamera(),)
Padding(
padding: const EdgeInsets.all(8.0),
child: !isloaded
? Image.network(
"https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/2048px-No_image_available.svg.png")
: Image.file(imageFile)),
void pickImageFromCamera() async {
List<Media>? res = await ImagesPicker.openCamera(
pickType: PickType.image,
);
print(res);
if (res != null) {
print(res[0].path);
setState(() {
imageFile = File(res[0].path);
isloaded = true;
setState(() {});
});
} else {
setState(() {
isloaded = false;
});
}
}