Pendahuluan
Flutter Camera Image Gallery Dalam pengembangan aplikasi mobile, fitur kamera dan galeri sangat penting untuk mengambil serta memilih gambar. Flutter menyediakan package camera untuk mengakses kamera perangkat dan image_picker untuk memilih gambar dari galeri atau mengambil gambar dengan kamera.
Dalam tutorial ini, kita akan membangun aplikasi Flutter yang memungkinkan pengguna untuk:
- Mengambil gambar menggunakan kamera
- Memilih gambar dari galeri
1. Instalasi Package
Sebelum memulai, tambahkan package berikut ke dalam proyek Flutter:
Buka pubspec.yaml dan tambahkan:
|
1 2 3 4 5 |
dependencies: flutter: sdk: flutter camera: ^0.10.5+2 # Periksa versi terbaru di pub.dev image_picker: ^1.0.7 # Periksa versi terbaru di pub.dev |
Lalu jalankan perintah:
|
1 |
flutter pub get |
2. Konfigurasi Android
Untuk menggunakan kamera dan galeri di Android, lakukan konfigurasi berikut:
a. Ubah minSdkVersion
Buka file android/app/build.gradle dan ubah minSdkVersion menjadi 21:
|
1 2 3 4 5 6 7 |
defaultConfig { applicationId = "com.example.praktikum_8" minSdkVersion 21 targetSdkVersion flutter.targetSdkVersion versionCode flutter.versionCode versionName flutter.versionName } |
b. Tambahkan Izin di AndroidManifest.xml
Tambahkan izin berikut di android/app/src/main/AndroidManifest.xml:
Ini di taruh sebelum
|
1 2 3 |
<uses-permission android:name="android.permission.CAMERA"/> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> |
3. Implementasi Kamera
Buka file lib/camera_page.dart dan tambahkan kode berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import 'package:flutter/material.dart'; import 'package:camera/camera.dart'; class CameraPage extends StatefulWidget { @override _CameraPageState createState() => _CameraPageState(); } class _CameraPageState extends State<CameraPage> { CameraController? _controller; Future<void>? _initializeControllerFuture; @override void initState() { super.initState(); _setupCamera(); } Future<void> _setupCamera() async { final cameras = await availableCameras(); _controller = CameraController(cameras.first, ResolutionPreset.high); _initializeControllerFuture = _controller!.initialize(); setState(() {}); } @override void dispose() { _controller?.dispose(); super.dispose(); } @override Widget build(BuildContext context) { if (_controller == null || !_controller!.value.isInitialized) { return Center(child: CircularProgressIndicator()); } return Scaffold( appBar: AppBar(title: Text("Camera")), body: CameraPreview(_controller!), floatingActionButton: FloatingActionButton( onPressed: () async { try { await _initializeControllerFuture; final image = await _controller!.takePicture(); ScaffoldMessenger.of(context).showSnackBar( SnackBar(content: Text("Photo captured: ${image.path}")), ); } catch (e) { print(e); } }, child: Icon(Icons.camera), ), ); } } |
4. Implementasi Galeri
Buka file lib/gallery_page.dart dan tambahkan kode berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import 'dart:io'; import 'package:flutter/material.dart'; import 'package:image_picker/image_picker.dart'; class GalleryPage extends StatefulWidget { @override _GalleryPageState createState() => _GalleryPageState(); } class _GalleryPageState extends State<GalleryPage> { File? _image; final ImagePicker _picker = ImagePicker(); Future<void> _pickImage(ImageSource source) async { final pickedFile = await _picker.pickImage(source: source); if (pickedFile != null) { setState(() { _image = File(pickedFile.path); }); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Gallery Picker")), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ _image == null ? Text("No image selected") : Image.file(_image!, width: 200, height: 200), SizedBox(height: 20), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton( onPressed: () => _pickImage(ImageSource.gallery), child: Text("Pick from Gallery"), ), SizedBox(width: 10), ElevatedButton( onPressed: () => _pickImage(ImageSource.camera), child: Text("Take Photo"), ), ], ), ], ), ); } } |
5. Implementasi Halaman Utama
Buka file lib/main.dart dan tambahkan kode berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
import 'package:flutter/material.dart'; import 'camera_page.dart'; import 'gallery_page.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: HomePage(), ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Camera & Gallery App")), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton( onPressed: () => Navigator.push( context, MaterialPageRoute(builder: (context) => CameraPage()), ), child: Text("Open Camera"), ), SizedBox(height: 20), ElevatedButton( onPressed: () => Navigator.push( context, MaterialPageRoute(builder: (context) => GalleryPage()), ), child: Text("Open Gallery"), ), ], ), ), ); } } |
Kesimpulan
Dengan mengikuti tutorial ini, kita telah berhasil mengimplementasikan fitur kamera dan galeri dalam aplikasi Flutter. Pengguna dapat mengambil foto menggunakan kamera serta memilih gambar dari galeri. Semoga bermanfaat! 🚀
Penjelasan Hasil Implementasi
Setelah mengikuti tutorial ini, aplikasi Flutter yang telah dibuat memiliki dua fitur utama:
- Mengambil Gambar dengan Kamera
- Ketika pengguna membuka halaman kamera, aplikasi akan mengakses kamera perangkat.
- Jika kamera berhasil diinisialisasi, pengguna dapat melihat pratinjau langsung dari kamera.
- Saat tombol kamera ditekan, gambar akan diambil dan disimpan di penyimpanan lokal perangkat.
- Hasilnya akan ditampilkan melalui
SnackBaryang menunjukkan lokasi penyimpanan gambar.
- Memilih Gambar dari Galeri
- Pengguna dapat membuka halaman galeri dengan menekan tombol “Pick from Gallery”.
- Aplikasi akan membuka pemilih gambar bawaan perangkat.
- Setelah pengguna memilih gambar, gambar tersebut akan ditampilkan di layar.
- Jika pengguna memilih opsi “Take Photo”, kamera akan terbuka dan gambar yang diambil akan langsung ditampilkan.
Rincian Keunggulan Implementasi
- Menggunakan Package yang Sesuai
cameradigunakan untuk mengambil gambar langsung dari kamera, sedangkanimage_pickerdigunakan untuk memilih gambar dari galeri dan mengambil gambar dari kamera dengan lebih fleksibel. - Manajemen State yang Baik
- Di
CameraPage, objekCameraControllermemastikan kamera diinisialisasi sebelum digunakan. - Di
GalleryPage,setState()digunakan untuk memperbarui tampilan setelah gambar dipilih.
- Di
- UI yang Sederhana dan Mudah Digunakan
- Terdapat tombol navigasi yang jelas untuk memilih antara kamera dan galeri.
- Hasil gambar yang dipilih atau diambil langsung ditampilkan di layar.
Dengan implementasi ini, aplikasi mampu mengakomodasi kebutuhan pengguna dalam mengambil dan memilih gambar dengan cara yang mudah dan efisien. 🚀
Jangan Lupa Ikutin Modul Lain bersama Zawata
