Intstall image picker and setup correctly
Imagepicker
Initialize variables
File _image;
final Imagepicker = ImagePicker();
Button for opening bottom model
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red, // background
onPrimary: Colors.white, // foreground
),
onPressed: () {
openImagePickerModal(context);},
child: Text('Select Image'),
),
To view selected Image
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 200,
width: 200,
child: Image.file(
_image,
fit: BoxFit.fill,
)),
),
Image Picker Model Bottom Sheet,For Select Images or Capture Image
void openImagePickerModal(BuildContext context) {
final flatButtonColor = Theme.of(context).primaryColor;
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
height: 180.0,
padding: EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
'Pick An Image',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
),
SizedBox(
height: 15.0,
),
FlatButton(
textColor: flatButtonColor,
child: Text(
'Use Camera',
style: TextStyle(fontSize: 15),
),
onPressed: () {
Pickimage(context, ImageSource.camera);
Navigator.pop(context);
},
),
FlatButton(
textColor: flatButtonColor,
child: Text(
'Use Gallery',
style: TextStyle(fontSize: 15),
),
onPressed: () {
Pickimage(context, ImageSource.gallery);
Navigator.pop(context);
},
),
],
),
);
});
}
Function for Selecting Image from gallery or camera Image
Future Pickimage(BuildContext context, ImageSource source) async {
if (source != null) {
final pickedFile = await ImagePicker.pickImage(source: source);
setState(() {
if (pickedFile != null) {
_image = File(pickedFile.path);
} else {
print('No image selected.');
}
});
} else {}
}