Membangun Aplikasi Multiplatform dengan Flutter: Integrasi Camera dan Gallery

Salah satu fitur yang paling sering dibutuhkan dalam aplikasi mobile modern adalah kemampuan mengambil foto dari kamera atau memilih gambar dari galeri. Flutter, sebagai framework multiplatform, menyediakan paket image_picker yang menangani kedua skenario ini dengan API yang seragam di Android dan iOS. Artikel ini akan memandu kita melalui seluruh proses integrasi — dari instalasi paket, konfigurasi izin platform, hingga implementasi pengambilan gambar dan penanganan errornya.

Gambar: Anatomi aplikasi Flutter dari Framework hingga Embedder — Sumber: [Flutter Docs](https://docs.flutter.dev/resources/architectural-overview)

Menyiapkan Paket image_picker di Project Flutter

Langkah pertama yang perlu kita lakukan adalah menambahkan dependency image_picker ke dalam project Flutter. Paket ini tersedia di pub.dev dan dikelola secara resmi oleh tim Flutter, sehingga jaminan kompatibilitasnya sangat baik untuk digunakan di project production.

Kita bisa menambahkannya melalui file pubspec.yaml pada bagian dependencies:

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^1.0.4

Setelah menambahkan baris tersebut, jalankan perintah flutter pub get di terminal untuk mengunduh dan menginstal paket beserta seluruh dependensinya. Proses ini hanya perlu dilakukan satu kali selama pengembangan, kecuali kita mengubah versi paket.

Paket image_picker menyediakan class utama bernama ImagePicker yang memiliki dua method andalan: pickImage() untuk memilih satu gambar dan pickMultiImage() untuk memilih banyak gambar sekaligus. Kedua method ini mengembalikan objek XFile, yaitu representasi file lintas platform yang menangani perbedaan path dan format file antara Android dan iOS secara otomatis. Dengan satu paket ini saja, kita sudah bisa mengakses kamera dan galeri tanpa perlu menulis kode native terpisah untuk masing-masing platform.

Mengonfigurasi Izin Platform untuk Android dan iOS

Setelah paket terinstal, kita perlu memberikan izin yang diperlukan oleh masing-masing sistem operasi. Di sinilah pendekatan multiplatform Flutter membutuhkan sedikit sentuhan native — kita harus menyentuh file konfigurasi spesifik untuk setiap platform.

Untuk Android, buka file android/app/src/main/AndroidManifest.xml dan tambahkan baris permission berikut di dalam tag <manifest>:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"
    android:maxSdkVersion="32" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"
    android:maxSdkVersion="29" />

Perhatikan atribut android:maxSdkVersion pada izin READ_EXTERNAL_STORAGE. Pada Android 13 (API level 33) ke atas, Google memperkenalkan sistem izin granular untuk media yang lebih terperinci. Izin READ_EXTERNAL_STORAGE sudah tidak berlaku lagi — sebagai gantinya, Android secara otomatis menggunakan READ_MEDIA_IMAGES saat aplikasi menargetkan API level 33+. Atribut android:maxSdkVersion="32" memastikan izin lama tidak ikut dibaca di perangkat yang lebih baru, sehingga sesuai dengan kebijakan Google Play Store.

Untuk iOS, buka file ios/Runner/Info.plist dan tambahkan dua key berikut:

<key>NSCameraUsageDescription</key>
<string>Aplikasi ini membutuhkan akses kamera untuk mengambil foto</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Aplikasi ini membutuhkan akses galeri untuk memilih gambar</string>

String deskripsi ini akan muncul di dialog izin yang ditampilkan kepada pengguna saat pertama kali fitur kamera atau galeri digunakan. Pastikan deskripsinya jelas dan relevan dengan fungsi aplikasi kita, karena Apple akan menolak aplikasi yang menggunakan alasan terlalu umum atau tidak sesuai.

Mengambil Foto Langsung dari Kamera

Dengan izin yang sudah dikonfigurasi, kita siap menulis kode untuk mengambil foto langsung dari kamera. Flutter menggunakan method pickImage() dengan parameter source: ImageSource.camera untuk membuka antarmuka kamera native milik sistem operasi.

import 'dart:io';
import 'package:image_picker/image_picker.dart';

final ImagePicker picker = ImagePicker();

Future<void> ambilFotoDariKamera() async {
  try {
    final XFile? foto = await picker.pickImage(
      source: ImageSource.camera,
      maxWidth: 1080,
      imageQuality: 80,
    );

    if (foto != null) {
      setState(() {
        gambarTerpilih = File(foto.path);
      });
    }
  } catch (e) {
    // Tangani error kamera tidak tersedia
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Kamera tidak tersedia: $e')),
    );
  }
}

Logika dari kode di atas cukup sederhana. Kita membuat instance ImagePicker lalu memanggil pickImage() dengan source: ImageSource.camera. Method ini bersifat asynchronous dan akan mengembalikan objek XFile? yang bersifat nullable. Nilai null menandakan bahwa pengguna membatalkan pengambilan foto, sementara exception bisa terjadi jika kamera tidak tersedia.

Dua parameter penting yang perlu diperhatikan adalah maxWidth: 1080 dan imageQuality: 80. Parameter maxWidth membatasi resolusi gambar agar tidak melebihi 1080 piksel pada sisi terpanjangnya, sementara imageQuality mengompresi JPEG ke tingkat kualitas 80%. Keduanya sangat berguna untuk menghemat memori perangkat dan mempercepat proses upload ke server nantinya.

Memilih Gambar dari Galeri dengan Opsi Multi-Selection

Selain kamera, image_picker juga mendukung pemilihan gambar dari galeri, baik satu gambar maupun banyak gambar sekaligus. Untuk single selection, kita cukup mengganti parameter source menjadi ImageSource.gallery. Namun fitur yang lebih menarik adalah method pickMultiImage() yang memungkinkan pengguna memilih beberapa gambar dalam satu kali operasi tanpa harus membuka galeri berulang kali.

import 'dart:io';
import 'package:image_picker/image_picker.dart';

final ImagePicker picker = ImagePicker();

Future<void> pilihGambarDariGaleri() async {
  try {
    final List<XFile> gambarList = await picker.pickMultiImage(
      imageQuality: 85,
      maxWidth: 1080,
    );

    if (gambarList.isNotEmpty) {
      setState(() {
        daftarGambar = gambarList.map((xfile) => File(xfile.path)).toList();
      });
    }
  } catch (e) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Gagal membuka galeri: $e')),
    );
  }
}

Perbedaan paling mendasar antara pickImage() dan pickMultiImage() terletak pada tipe kembaliannya. pickImage() mengembalikan XFile? (nullable, single file), sedangkan pickMultiImage() mengembalikan List<XFile> yang selalu berupa list dan bisa saja kosong jika pengguna tidak memilih apa pun. Perbedaan tipe kembalian ini berarti kita perlu melakukan null-check pada pickImage(), tetapi cukup memeriksa isNotEmpty pada pickMultiImage().

Hasil dari pickMultiImage() paling cocok ditampilkan menggunakan widget GridView. Dengan mengonversi setiap XFile menjadi File dan menyimpannya dalam list, kita bisa dengan mudah membangun layout grid responsif yang menampilkan semua gambar pilihan pengguna secara sekaligus.

Menampilkan dan Mengelola State Gambar yang Dipilih

Menyimpan gambar dalam state memerlukan widget yang dapat memperbarui UI secara reaktif saat data berubah. Pendekatan paling umum adalah menggunakan StatefulWidget dengan variabel state bertipe File? untuk single image atau List<File> untuk multiple image.

class ImagePickerScreen extends StatefulWidget {
  @override
  _ImagePickerScreenState createState() => _ImagePickerScreenState();
}

class _ImagePickerScreenState extends State<ImagePickerScreen> {
  File? _gambar;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Image Picker Demo')),
      body: Center(
        child: _gambar != null
            ? Image.file(_gambar!, fit: BoxFit.cover)
            : const Icon(Icons.add_photo_alternate,
                size: 80, color: Colors.grey),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => ambilFotoDariKamera(),
        child: const Icon(Icons.camera_alt),
      ),
    );
  }
}

Dalam contoh di atas, state _gambar bertipe File? yang menampung gambar yang dipilih. Saat _gambar masih bernilai null, kita tampilkan placeholder berupa ikon bergambar abu-abu yang memberi tahu pengguna bahwa belum ada gambar yang dipilih. Setelah gambar berhasil diambil, widget Image.file() akan langsung merender gambar tersebut ke layar. Pendekatan kondisional seperti ini memberikan umpan balik visual yang jelas kepada pengguna.

Pola manajemen state menggunakan StatefulWidget sudah cukup memadai untuk kebutuhan integrasi kamera dan galeri. Untuk aplikasi yang lebih kompleks dengan banyak state berbeda, kita bisa mempertimbangkan state management yang lebih terstruktur seperti Riverpod atau Bloc.

Menangani Error dan Kondisi Edge

Setiap fitur yang berinteraksi dengan hardware dan sistem operasi pasti memiliki kondisi edge yang perlu kita antisipasi. Berikut beberapa skenario yang paling sering terjadi dan cara menanganinya.

Kamera tidak tersedia. Saat aplikasi dijalankan di emulator atau perangkat tablet tanpa kamera, pemanggilan pickImage() dengan ImageSource.camera akan memicu exception. Solusinya adalah membungkus kode dengan blok try-catch dan menampilkan pesan kesalahan yang informatif melalui SnackBar.

Izin ditolak pengguna. Jika pengguna menolak dialog izin, method pickImage() akan mengembalikan null. Dalam kasus ini, kita bisa memeriksa nilai kembalian dan menampilkan informasi bahwa fitur kamera atau galeri tidak dapat digunakan tanpa izin yang diperlukan. Untuk pengalaman pengguna yang lebih baik, kita bisa mengarahkan mereka ke pengaturan aplikasi melalui openAppSettings().

Ukuran file terlalu besar untuk ditampilkan atau diunggah. Parameter imageQuality dan maxWidth/maxHeight adalah solusi paling efektif untuk mengontrol ukuran file langsung dari sisi klien. Dengan imageQuality: 80 dan maxWidth: 1080, ukuran rata-rata file JPEG yang dihasilkan berkisar antara 100 KB hingga 300 KB. Ukuran ini jauh lebih kecil dibandingkan resolusi kamera default yang bisa mencapai beberapa megabyte dan akan mempercepat proses unggah secara signifikan.

Fitur kamera dan galeri adalah fondasi dari banyak aplikasi populer seperti e-commerce, media sosial, dan aplikasi profil pengguna. Dengan image_picker, Flutter memberikan kita API yang sederhana namun powerful untuk mengintegrasikan kedua fitur ini secara multiplatform. Jika kita ingin memperdalam kemampuan Flutter lebih jauh — termasuk integrasi native features seperti maps, notifikasi push, dan bluetooth — bergabunglah dengan bootcamp Flutter di Rumah Coding. Kurikulumnya dirancang untuk membawa kita dari tingkat pemula hingga siap membangun aplikasi produksi yang kompleks.