Saturday, February 22, 2020

Cara Mengambil Data Dari Popup Dialog pada Flutter

Mengambil Nilai Dari Popup Dialog
Cara Mengambil atau Mengembalikan Data Dari Popup Dialog Pada Flutter - Dalam membuat aplikasi moilde dengan Flutter, tidak jarang kita menampilkan popup dialog untuk menampilkan daftar pilihan yang cukup banyak. Daftar pilihan yang kita tampilkan dalam bentuk popup dialog tersebut, harus kita tangkap atau dikembalikan nilainya ketika user memilih salah satu daftar pilihan yang kita tampilkan.
Hasil Aplikasi
Selain mengembalikan nilai yang dipilih oleh pengguna dari popup dialog, kita juga harus dapat menentukan jika pengguna tidak memilih satu diantara daftar yang ada atau menutup dialog. Karena hal ini terkait tindakan atau proses yang akan kita jalankan pada halaman dimana popup dialog itu dipanggil. Untuk itu kita perlu tahu bagaimana cara menampilkan popup dialog untuk menampilkan daftar serta mengambil nilai dari daftar yang dipilih oleh pengguna pada popup dialog tersebut.

Pada prinsipnya, untuk menampilkan dialog pada Flutter, kita bisa menggunakan method/fungsi showDialog dan menempatkan widget pada field builder dan mengisi context nya. Fungsi ini mengembalikan tipe Future yang bisa kita gunakan untuk mengembalikan nilai tertentu, Adapun struktur dari fungsi showDialog adalah sebagai berikut ini:
showDialog(
    context: context,
    builder: (BuildContext context){
      return MyWidget();
    }
);

Fungsi tersebut mengembalikan Future dengan dengan tipe tertentu. Misalnya kita akan mengambang nilai dengan tipe String, untuk menampung hasil pilihan pengguna pada popup dialog yang muncul. Sehingga kita bisa menulis fungsi wrapper nya sebagai berikut:
Future _showMyDialog(){
  return showDialog(
      context: context,
      builder: (BuildContext context){
        return MyWidget();
      }
  );
}

Dengan wrapper di atas, kita dapat mengggunakan fungsi Navigator.pop saat menutup dialog dan mengisi variable kembalian parameter keduanya seperti berikut ini:
Navigator.pop(context, "dataku");
Dengan kode di atas, nilai dengan tipe String yang dikembalikan melalui Future adalah "dataku", dan untuk mengetahui bahwa tidak ada data yang dipilih oleh pengguna atau pengguna menekan tombol close/cancel, maka kita bisa memanggil fungsi Navigator.pop tanpa parameter ke-2 seperti berikut ini:
Navigator.pop(context);

Nah, agar sobat eduprog tidak bingung dalam memahami cara mengambil data dari popup dialog pada Flutter, untuk itu saya buatkan contoh real dalam bentuk source code aplikasi dengan studi kasus aplikasi untuk memilih daftar menu makanan dengan menampilkan popup dialog.

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini

Share This
Previous Post
Next Post

Halo, Saya A.M Hirin seorang Penulis Buku IT, International Freelance Programmer, dan Senior Developer di Perusahaan Konsultan IT. Saya penggila kode dan sudah berkutat selama 15 tahun di dunia pemrograman. Anda membutuhkan bantuan terkait skill dan keahlian saya? Kontak saya melalui email : nump.info@gmail.com

0 komentar: