Tutorial kali ini kita akan membahas bagaimana implementasi package image_picker pada project flutter kita agar bisa mengambil gambar dari galeri atau kamera,disini saya menggunakan package image_picker dengan versi ^0.8.4+4, untuk melihat versi terbaru silahkan kunjungi link disini. Project ini sudah mendukung null safety sehingga jika teman-teman ingin ikuti tutorial ini saya sarankan agar upgrade versi flutter anda agar mendukung null safety...
Pertama kita tambahkan package image_picker pada file pubspec.yaml, selanjutnya jangan lupa untuk melakukan perintah pub get agar package di load ke project kita...
Berikutnya jika langkah di atas sudah dilakukan kita akan memulai membuat design halaman awal dengan tampilan gambar seperti di bawah
untuk code nya seperti ini:
return Scaffold(
appBar: AppBar(
elevation: 0,
leadingWidth: 35,
iconTheme: const IconThemeData(color: Colors.white),
title: Container(
padding: const EdgeInsets.only(top: 10, bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const <Widget>[
Text(
"Image Picker",
style: TextStyle(color: Colors.white, fontSize: 18),
),
],
),
),
actions: [
GestureDetector(
onTap: () {
showModalBottomSheet(
context: context,
backgroundColor: Colors.transparent,
builder: ((builder) => _ambilGambar()),
);
},
child: Container(
padding: const EdgeInsets.only(right: 8),
child: const Icon(Icons.image_search)))
],
),
body: Container(
color: const Color(0xFFf2f2f2),
child: _image == null
? const Center(
child: Icon(
Icons.image_aspect_ratio,
color: Color(0xFFE0E0E0),
size: 100,
))
: Image(
width: double.infinity,
height: double.infinity,
image: FileImage(File(_image!.path))),
));
Selanjutnya kita akan membuat tampilan bottom sheet dialog beserta aksi tombol dimana design nya akan menampilkan dua pilihan untuk memilih mengambil gambar dari camera atau galeri
source code untuk Widget tampilan bottom sheet dialog beserta logicnya :
Widget _ambilGambar() {
return Container(
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10), topRight: Radius.circular(10)),
),
child: Wrap(
children: <Widget>[
Container(
width: double.infinity,
padding: const EdgeInsets.only(top: 10, bottom: 20),
child: const Text(
"Ambil Gambar",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
),
),
Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
Expanded(
flex: 1,
child: GestureDetector(
onTap: () {
Navigator.pop(context);
getImage(ImageSource.camera);
},
child: Column(
children: [
const Icon(
Icons.camera,
size: 40,
),
Container(
margin: const EdgeInsets.only(top: 5),
child: const Text("Ambil dari Kamera"))
],
),
),
),
Expanded(
flex: 1,
child: GestureDetector(
onTap: () {
Navigator.pop(context);
getImage(ImageSource.gallery);
},
child: Column(
children: [
const Icon(
Icons.image,
size: 40,
),
Container(
margin: const EdgeInsets.only(top: 5),
child: const Text("Ambil dari Galeri"))
],
),
),
),
]),
Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(vertical: 10),
margin: const EdgeInsets.only(top: 20),
color: Theme.of(context).colorScheme.primary,
child: const Text(
'TUTUP',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
))
],
),
);
}
Future getImage(ImageSource src) async {
var image = await _picker.pickImage(source: src);
setState(() {
_image = image;
});
}
Tampilan ketika memilih camera atau galeri dan hasilnya:
Untuk source code lengkapnya:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image Picker',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.teal,
),
home: const ImagePickerPage(),
);
}
}
class ImagePickerPage extends StatefulWidget {
const ImagePickerPage({Key? key}) : super(key: key);
@override
State<ImagePickerPage> createState() => _ImagePickerPageState();
}
class _ImagePickerPageState extends State<ImagePickerPage> {
XFile? _image;
final ImagePicker _picker = ImagePicker();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
leadingWidth: 35,
iconTheme: const IconThemeData(color: Colors.white),
title: Container(
padding: const EdgeInsets.only(top: 10, bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const <Widget>[
Text(
"Image Picker",
style: TextStyle(color: Colors.white, fontSize: 18),
),
],
),
),
actions: [
GestureDetector(
onTap: () {
showModalBottomSheet(
context: context,
backgroundColor: Colors.transparent,
builder: ((builder) => _ambilGambar()),
);
},
child: Container(
padding: const EdgeInsets.only(right: 8),
child: const Icon(Icons.image_search)))
],
),
body: Container(
color: const Color(0xFFf2f2f2),
child: _image == null
? const Center(
child: Icon(
Icons.image_aspect_ratio,
color: Color(0xFFE0E0E0),
size: 100,
))
: Image(
width: double.infinity,
height: double.infinity,
image: FileImage(File(_image!.path))),
));
}
Widget _ambilGambar() {
return Container(
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10), topRight: Radius.circular(10)),
),
child: Wrap(
children: <Widget>[
Container(
width: double.infinity,
padding: const EdgeInsets.only(top: 10, bottom: 20),
child: const Text(
"Ambil Gambar",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
),
),
Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
Expanded(
flex: 1,
child: GestureDetector(
onTap: () {
Navigator.pop(context);
getImage(ImageSource.camera);
},
child: Column(
children: [
const Icon(
Icons.camera,
size: 40,
),
Container(
margin: const EdgeInsets.only(top: 5),
child: const Text("Ambil dari Kamera"))
],
),
),
),
Expanded(
flex: 1,
child: GestureDetector(
onTap: () {
Navigator.pop(context);
getImage(ImageSource.gallery);
},
child: Column(
children: [
const Icon(
Icons.image,
size: 40,
),
Container(
margin: const EdgeInsets.only(top: 5),
child: const Text("Ambil dari Galeri"))
],
),
),
),
]),
Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(vertical: 10),
margin: const EdgeInsets.only(top: 20),
color: Theme.of(context).colorScheme.primary,
child: const Text(
'TUTUP',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
))
],
),
);
}
Future getImage(ImageSource src) async {
var image = await _picker.pickImage(source: src);
setState(() {
_image = image;
});
}
}
Demikian tutorial kali ini..semoga tulisan ini bermanfaat untuk yang membaca tulisan ini serta untuk penulis pribadi....
Demo aplikasi silahkan klik
disini
Terima kasih!!!!
![download[4]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTjZWlrnTT40NYgU5ucxBcWq4Db0jd3Z_Qu0b1sVVUgCPCBfnHdqNMlt5-L3bxn9E33wx5tPnVvzHs0GIV-89ia608LkxlSBgMJJRlZ7ov1XpIMz4tSTcbXwbqKmsAxS15YFFOifxfYa4/w1274-h428-o-k/download+button+ungu+.png)
