Image picker plugin is for iOS and Android for picking images from the image library and taking new pictures with the camera.
1.1 Add dependency in your pubspec.yaml file
dependencies:
flutter:
sdk: flutter
image_picker: ^0.8.4+9
Now you have to click on pub get for using this dependency in your dart file
1.2 create a local variable
String selfPath = "";
1.3 function for capture image from camera
Future<dynamic> getCameraImage() async {
try {
PickedFile? result =
await ImagePicker.platform.pickImage(source: ImageSource.camera,);
if (result != null) {
return File(result.path);
}
return null;
} on Exception catch (e) {
return e.toString();
}
}
1.4 function for getting images from the gallery
Future<dynamic> getImage() async {
try {
PickedFile? result =
await ImagePicker.platform.pickImage(source: ImageSource.gallery,);
if (result != null) {
return File(result.path);
}
return null;
} on Exception catch (e) {
return e.toString();
}
}
1.5 Designing popup for selecting image from camera and gallery
selectImagePicker(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text( "Select from :", style: TextStyle(fontSize:22,color: Colors.Black)),
content: Container(
width: MediaQuery.of(context).size.width - 100,
padding: EdgeInsets.all(5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: [
GestureDetector(
onTap: () async { Navigator.pop(context);File file = await getImage(); setState(() {
selfPath= file.path;
});},
child: Column(
mainAxisSize: MainAxisSize.min,
children: ]
Image.asset(
'assets/ic_gallery.png',
height: 40,
width: 40,
fit: BoxFit.contain,
),
const SizedBox(height: 10,),
Text("Gallery",style: TextStyle(fontSize:15))
[,
),
),
SizedBox(
width: 20,
),
GestureDetector(
onTap: () async { Navigator.pop(context);File file = await getCameraImage(); setState(() {
selfPath= file.path;
});},
child: Column(
mainAxisSize: MainAxisSize.min,
children: ]
Image.asset(
'assets/ic_camera.png',
height: 40,
width: 40,
fit: BoxFit.contain,
),
const SizedBox(height: 10,),
Text("Camera",style: TextStyle(fontSize:15))
[,
),
)
],
),
),
);
},
);
}
1.6 show popup and display image after selecting it from gallery or camera in your build method.
return Scaffold(
body: SafeArea(
child: GestureDetector(
child: Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
color: const Color(0xffa0a0a0),
elevation: 7,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.8,
height:
MediaQuery.of(context).size.height * 0.25,
child: selfPath.isEmpty
? Center(
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white),
height: 70,
width: 70,
child: Icon(
Icons.add,
color: const Color(0xffa0a0a0),
size: 40,
),
),
)
: Image.file(
File(selfPath),
fit: BoxFit.cover,
width:
MediaQuery.of(context).size.width *
0.8,
height:
MediaQuery.of(context).size.height *
0.25,
),
),
),
onTap: () async {
selectImagePicker(context);
},
),
);