Flutter Widget Dialog

Kurnia Andi Nugroho

Tue, 17 Sep 2024

WIDGET DIALOG

Adalah salah satu widget built-in dalam Flutter yang digunakan untuk menampilkan pesan modal ke pengguna. Dialog biasanya digunakan untuk menampilkan informasi penting, meminta konfirmasi dari pengguna, atau meminta masukan dari pengguna. Dalam Flutter, beberapa contoh dialog built-in meliputi AlertDialog, SimpleDialog, dan BottomSheet.

PROPERTI

Berikut adalah beberapa properti yang sering digunakan dalam widget Dialog dalam Flutter:

1. title: Judul dari dialog.
2. content: Isi dari dialog, biasanya berupa widget Text atau beberapa widget lain.
3. actions: Tombol yang dapat ditemukan di bagian bawah dialog.
4. backgroundColor: Warna latar belakang dari dialog.
5. elevation: Tinggi bayangan yang ditampilkan di bawah dialog.
6. semanticLabel: Label semantik yang dapat digunakan oleh perangkat bantuan aksesibilitas.
7. shape: Bentuk dari dialog, biasanya menggunakan RoundedRectangleBorder.

Ini hanya beberapa contoh properti yang sering digunakan dalam widget Dialog dalam Flutter. Ada beberapa properti lain yang dapat digunakan sesuai dengan kebutuhan pengembang aplikasi.

EXAMPLE

Berikut adalah sintaks umum untuk membuat Dialog widget dalam Flutter:

• showDialog

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text("Judul Dialog"),
      content: Text("Isi dari Dialog"),
      actions: <Widget>[
        FlatButton(
          child: Text("Tutup"),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

Dalam sintaks di atas, kita menggunakan showDialog untuk menampilkan Dialog widget. Kita memasukkan context dan builder sebagai parameter. Dalam builder, kita membuat objek AlertDialog dengan properti title, content, dan actions. Kita juga menambahkan tombol tutup yang dapat ditemukan pada bagian bawah Dialog. Saat pengguna menekan tombol tutup, kita memanggil Navigator.of(context).pop() untuk menutup Dialog.

Ini hanya contoh sintaks umum untuk membuat Dialog widget dalam Flutter. Ada beberapa variasi lain dari Dialog widget seperti SimpleDialog, BottomSheet, dll. yang dapat dibuat dengan sintaks yang berbeda.

• SimpleDialog

Berikut adalah sintaks umum untuk membuat SimpleDialog widget dalam Flutter:

showDialog(
  context: context,
  builder: (BuildContext context) {
    return SimpleDialog(
      title: Text("Judul SimpleDialog"),
      children: <Widget>[
        SimpleDialogOption(
          child: Text("Pilihan 1"),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        SimpleDialogOption(
          child: Text("Pilihan 2"),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

Dalam sintaks di atas, kita menggunakan showDialog untuk menampilkan SimpleDialog widget. Kita memasukkan context dan builder sebagai parameter. Dalam builder, kita membuat objek SimpleDialog dengan properti title dan children. Dalam children, kita membuat beberapa objek SimpleDialogOption sebagai pilihan yang dapat dipilih oleh pengguna. Saat pengguna memilih salah satu pilihan, kita memanggil Navigator.of(context).pop() untuk menutup SimpleDialog.