Image Picker From Camera and Gallery in Flutter

December 22, 2021

Halo sobat baraja coding, pada artikel kali ini kita akan membahas tentang Image Picker From Camera and Gallery in Flutter. Image Picker adalah sebuah plugin pada flutter yang digunakan untuk memilih gambar dari galeri dan mengambil gambar menggunakan kamera.

Step 1. Tambahkan Dependencies

Tambahkan https://pub.dev/packages/image_picker/install pada pubspec.yml

dependencies:
flutter:
sdk: flutter
image_picker: ^0.8.4+3

Step 2. Tambahkan Future

Tambahkan future openCamera() dan openGallery() dengan menambahkan code seperti berikut

File? image;

Future openCamera() async {
final pickedImage =
await ImagePicker().pickImage(source: ImageSource.camera);
image = File(pickedImage!.path);
}

Future openGallery() async {
final imageGallery =
await ImagePicker().pickImage(source: ImageSource.gallery);
image = File(imageGallery!.path);
}

Step 3. Buat UI Upload Image

Buat tampilan UI upload image dengan menambahkan code seperti berikut

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
iconTheme: IconThemeData(color: Colors.black),
title: Text(
‘Update Profile’,
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.white,
),
body: Padding(
padding: EdgeInsets.only(top: 20, left: 25, right: 25, bottom: 20),
child: ListView(
children: [
Center(
child: Stack(
children: [
Container(
child: Column(children: [
image != null
? ClipOval(
child: Image.file(
image!,
width: 100,
height: 100,
fit: BoxFit.cover,
))
: SizedBox(
width: 100,
height: 100,
child: CircleAvatar(
radius: 50,
backgroundImage: AssetImage(
‘images/default.png’,
),
),
),
]),
),
Positioned(
bottom: 0,
left: 60,
right: 0,
child: CircleAvatar(
radius: 17,
backgroundColor: Colors.green,
child: Center(
child: InkWell(
onTap: () {
showModalBottomSheet(
context: context,
builder: ((builder) => Container(
height: 100,
width:
MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(
horizontal: 20, vertical: 20),
child: Column(
children: [
Text(
‘Choose Profile Photo’,
style: TextStyle(fontSize: 20),
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
FlatButton.icon(
icon: Icon(Icons.camera),
onPressed: () {

},
label: Text(‘Camera’),
),
FlatButton.icon(
icon: Icon(Icons.image),
onPressed: () {

},
label: Text(‘Gallery’),
)
],
)
],
))));
},
child: Icon(Icons.camera_alt_rounded,
color: Colors.white, size: 18))),
), // Container(
)
],
),
),
],
),
),
);
}

Step 4. Tambahkan Open Camera dan Open Gallery Pada FlatButton

Tambahkan openCamera() dan openGallery() pada onPressed FlatButton seperti berikut

Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FlatButton.icon(
icon: Icon(Icons.camera),
onPressed: () {
openCamera();
Navigator.pop(context);
},
label: Text(‘Camera’),
),
FlatButton.icon(
icon: Icon(Icons.image),
onPressed: () {
openGallery();
Navigator.pop(context);
},
label: Text(‘Gallery’),
)
],
)

Hasil Run :

Jadi sekian pada artikel kali ini, sampai jumpa pada artikel selanjutnya. Selamat Mencoba 🙂