Flutter : Cara Akses Gambar di Galeri dan Menampilkan

Pengolahan Gambar Flutter

Berbagai fitur yang dimiliki flutter untuk mengembangkan suatu aplikasi, salah satunya fitur untuk melakukan olah gambar. Gambar merupakan suatu elemen penting yang setidaknya harus ada dalam suatu aplikasi, sebab tanpa adanya gambar sebuah aplikasi akan terasa hambar. 

Selain terasa hambar, juga akan terasa ada yang kurang jika sebuah aplikasi yang dibuat hanya mengandung teks-teks. Maka dari itu, penggunaan gambar menjadi salah satu solusi untuk memperkaya UI.

Bagaimana cara mengolah gambar dalam flutter ?

Kita mulai dengan belajar mengakses sebuah gambar di galeri gawai kemudian menampilkan gambar tersebut.

Pertama, tentu buat projek baru :

flutter create upload_gambar_php

Setelah selesai proses pembuatan projek, lanjut buka dengan VS Code :

Buka file main.dart yang berada di dalam folder /lib/main.dart

Sampai sini, kita ubah sedikit untuk baris kode :

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',

      theme: ThemeData(

        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),

        useMaterial3: true,

      ),

      home: const MyHomePage(title: 'Olah Gambar'),

    );

  }

}

Bagian title : 'Olah Gambar'

Gak ngefek sih 😎

Nggak papa lah ya ...

Okey, selanjutnya hapus keseluruhan baris kode yang di dalam lingkup :

class _MyHomePageState extends State<MyHomePage> { } 

Sehingga tampak seperti diatas.

Nantinya kita ganti dengan penjelasan-penjelasan untuk mengolah gambar di galeri.

Tambahkan package yang bernama image_picker ke dalam projek dengan perintah :

Dilanjut dengan menjalankan perintah flutter pub get [ Enter ] untuk memperbarui packages dan lebih tersinkronisasi dengan projek.

Selanjutnya kembali ke area class MyHomePageState, tambahkan variabel _gambar dengan tipe data File, _pilihGambar dengan inisialisasi final dan memiliki nilai ImagePicker() serta satu buah controller TextField() yang nantinya digunakan untuk mengetahui letak ( path ) dari gambar.

class MyHomePageState menjadi :

Sampai sini kita sudah memiliki tempat untuk menampung gambar, yaitu _gambar.

Kemudian buat sebuah fungsi yang nantinya akan dipanggil oleh sebuah tombol saat terjadi event klik terhadap tombol ( widget ElevatedButton ). Fungsi ini memiliki sifat Future, perhatikan dengan teliti baris kode dibawah ini :

Buat fungsi dengan nama _bukaPilihGambar() yang async.

Memahami Async dalam Flutter

Isi dengan baris kode :

Ket :

gambarTerpilih merupakan sebuah variabel final dengan tipe XFile. Secara singkat baris kode ini berfungsi untuk membuka galeri perangkat dan memungkinkan memilih gambar di galeri. Gambar yang terpilih akan disimpan ke dalam variabel gambarTerpilih sebagai objek dari XFile. Apabila pengguna tidak melakukan pemilihan sebuah gambar maka objek gambarTerpilih akan bernilai null.

Selanjutnya dengan setState(() { }), mengisi variabel _gambar dengan file gambar yang telah terpilih melalui gambarTerpilih. Simpan juga lokasi gambar ( path ) dengan controller lokasiGambar.

Selanjutnya pada bagian 

  @override

  Widget build(BuildContext context) { }

Tambahkan :

• Widget Text() untuk menuliskan keterangan Pilih Gambar
• ElevatedButton() sebagai tombol masuk ke Galeri ( Browse )
• TextFiled() guna menuliskan lokasi dari gambar yang dipilih melalui ElevatedButton()
• Sizebox()
• Container() yang digunakan untuk menampung gambar terpilih kemudian ditampilkan.

di dalam body : dan ketiga widget tersebut dibungkus di dalam widget Column()

            Container(

              width: 150,

              child: _gambar != null

                      ? Image.file(_gambar!, fit: BoxFit.cover,)

                      : const Text("Pilih sebuah gambar"),

            )

Kode di dalam Container ini bila _gambar tidak null ( kosong ), artinya ada gambar yang sudah dipilih maka gambar akan ditampilkan sesuai dengan ukuran layar fit: BoxFit.cover. Bila tidak ada ( belum ada ) gambar yang dipilih maka akan menampilkan tulisan "Pilih sebuah gambar".

Bagian terkahir merupakan aksesoris saja, bawaan default dari flutter projek. Boleh dihapus akan dibuat fungsi lainnya.

Sekarang selesai, coba jalankan 

flutter run 

Pilih 3, coba menjalankan via browser web 

Muncul tampilan projek via browser web 

Sekarang coba tekan tombol Pilih Gambar

Pilih gambar yang diinginkan, kemudian tekan Open

Wah 😨

Tapi tidak apa-apa man teman. Ini normal dan terjadi sebab memang :

Image.file() tidak bisa berjalan menggunakan flutter web. Jadi harus langsung via gawai ( HP )

Sekarang coba sambungkan sebuah gawai dengan USB ( disini menggunakan Android Infinix X6737B - Zero 30 )

Pastikan gawai telah di set untuk bisa Developer Mode dan diizinkan untuk USB Debug

Colokkan USB dan kemungkin akan muncul pop up ( beberapa gawai tidak muncul ). Tekan Izinkan :

Kembali ke VS Code jalankan kembali dengan flutter run :

Tunggu sampai selesai, aplikasi akan terpasang di gawai dan otomatis akan terbuka :

Tekan "Pilih Gambr", akan memunculkan foto-foto di galeri gawai :

Dan taraaaaa

Gambar pilihan muncul di area Container dan TextFied() terisi dengan lokasi gambar.

Okey, sampai sini dulu untuk artikel kali ini....

Sampai jumpa di artikel selanjutnya 😎