Flutter Dialog

View Categories

Flutter Dialog

Dialog adalah jenis widget yang tampil di jendela atau layar dan berisi informasi penting atau meminta keputusan dari pengguna. Saat dialog muncul, semua fungsi lain menjadi tidak aktif sampai dialog ditutup atau pengguna memberikan respons. Dialog dapat digunakan untuk berbagai keperluan, seperti memberikan notifikasi peringatan atau menampilkan beberapa opsi pilihan. Bahkan, kita dapat membuat dialog yang dapat digunakan sebagai tab untuk menampilkan dialog lainnya.

Tipe Dialog Flutter

  • AlertDialog
  • SimpleDialog
  • showDialog

AlertDialog

AlertDialog akan memberi tahu pengguna jika ada kondisi tertentu yang berisi peringatan yang memerlukan perhatian. Kotak dialog peringatan tersebut dapat berisi judul opsional dan daftar tindakan opsional. Jumlah tindakan yang tersedia bervariasi sesuai dengan kebutuhan. Terkadang, konten dalam kotak dialog terlalu besar untuk ukuran layar yang tersedia. Untuk mengatasi hal ini, kita dapat menggunakan class Expanded.

Constructor dari AlertDialog

AlertDialog(
               {
                   Key key,
                   Widget title,
                   EdgeInsetsGeometry titlePadding,
                   TextStyle titleTextStyle,
                   Widget content,
                   EdgeInsetsGeometry contentPadding: const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0),
                   TextStyle contentTextStyle,
                   List actions,
                   EdgeInsetsGeometry actionsPadding: EdgeInsets.zero,
                   VerticalDirection actionsOverflowDirection,
                   double actionsOverflowButtonSpacing,
                   EdgeInsetsGeometry buttonPadding,
                   Color backgroundColor,
                   double elevation,
                   String semanticLabel,
                   EdgeInsets insetPadding: _defaultInsetPadding,
                   Clip clipBehavior: Clip.none,
                   ShapeBorder shape,
                   bool scrollable: false
             }
)

Properti AlertDialog

  • title: Disarankan membuat judul dialog sesingkat mungkin agar mudah dipahami oleh pengguna.
  • action: Berfungsi untuk menampilkan konten yang harus dilakukan.
  • content: Isi dari AlertDialog.
  • shape: Digunakan untuk menentukan bentuk kotak dialog, misalnya bulat, melengkung, atau lainnya.

Berikut ini potongan kode untuk membuat dialog box

AlertDialog(
      title: const Text('Welcome'), // Untuk menampilkan judul
      content: const Text(
          'Nextgen Tutorial'), // Pesan yang akan muncul di layar
      // Widget action yang akan menyediakan pilihan untuk pengguna.
      actions: [
        TextButton(
          onPressed:
              () {}, // Fungsi akan dilakukan setelah tombol ditekan
          child: const Text('CANCEL'),
        ),
        TextButton(
          onPressed: () {},
          child: const Text('ACCEPT'),
        ),
      ],
    );

Output:

Tangkapan layar hasil output dari code flutter yang menampilkan dialog box

SimpleDialog

SimpleDialog adalah sebuah kotak dialog sederhana yang dapat membantu pengguna untuk memilih opsi-opsi yang tersedia. Kotak dialog ini dapat menampilkan judul yang opsional, dan akan muncul di atas daftar pilihan. Agar tampilan lebih fleksibel, kita dapat menggunakan padding pada widget kotak dialog tersebut. Padding digunakan untuk memberikan ruang ekstra pada widget, sehingga tampilannya lebih mudah dibaca dan dipahami.

Constructor dari SimpleDialog

SimpleDialog(
     {
               Key key,
               Widget title,
               EdgeInsetsGeometry titlePadding: const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),
               TextStyle titleTextStyle,
               List children,
               EdgeInsetsGeometry contentPadding: const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0),
               Color backgroundColor,
               double elevation,
               String semanticLabel,
               ShapeBorder shape
     }
)

Properti SimpleDialog

  • title: Disarankan untuk membuat judul dialog sependek mungkin agar mudah dipahami oleh pengguna.
  • shape: Digunakan untuk menentukan bentuk kotak dialog, misalnya bulat, melengkung, atau lainnya.
  • backgroundcolor: Menentukan warna latar belakang kotak dialog.
  • textStyle: Digunakan untuk mengubah gaya teks pada kotak dialog.

Berikut ini potongan kode untuk membuat simple dialog

SimpleDialog(
      title: const Text('Nextgen Tutorial'),
      children: [
        SimpleDialogOption(
          onPressed: () {},
          child: const Text('Option 1'),
        ),
        SimpleDialogOption(
          onPressed: () {},
          child: const Text('Option 2'),
        ),
      ],
    )

Output:

Tangkapan layar aplikasi flutter yang menampilkan dialog box dengan dua text button option

ShowDialog

ShowDialog adalah suatu fungsi untuk menampilkan kotak dialog di atas layar aplikasi kita. Fungsi ini harus dipanggil sebelum kotak dialog muncul. Fungsi ini akan menghentikan animasi yang sedang berjalan dan memunculkan animasi baru untuk menampilkan kotak dialog. Kotak dialog digunakan ketika kita ingin menampilkan informasi tambahan dalam tab tertentu atau ketika kita ingin menampilkan proses latar belakang pada tab utama.

Constructor dari showDialog

Future showDialog (
    {
           @required BuildContext context,
           WidgetBuilder builder,
           bool barrierDismissible: true,
           Color barrierColor,
           bool useSafeArea: true,
           bool useRootNavigator: true,
           RouteSettings routeSettings,
          @Deprecated(It returns the child from the closure provided to the builder class ) Widget child
     }
)

Properties showDialog

  • builder: Properti ini mengembalikan child daripada membuat child sebagai argumen.
  • barriercolor: Properti ini menentukan warna modal barrier yang menyebabkan seluruh tampilan dialog menjadi gelap.
  • useSafeArea: Properti ini memastikan bahwa dialog hanya menggunakan area aman layar tanpa menutupi area layar yang lain.

Berikut ini potongan kode untuk membuat fungsi showDialog

Center(
      child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return Expanded(
                  child: AlertDialog(
                    title: const Text('Welcome'),
                    content: const Text('Nextgen Tutorial'),
                    actions: [
                      TextButton(
                        onPressed: () {},
                        child: const Text('CANCEL'),
                      ),
                      TextButton(
                        onPressed: () {},
                        child: const Text('ACCEPT'),
                      ),
                    ],
                  ),
                );
              },
            );
          },
          child: const Text('showDialog')),
    );

Output:

 

Perbedaan Dari Ketiga Dialog

AlertDialog

  • Digunakan untuk menampilkan notifikasi berbagai informasi peringatan
  • Kita dapat memberikan opsi pilihan untuk aksi tindakan seperti tombol terima atau tombol tolak

SimpleDialog

  • Digunakan untuk menampilkan opsi sederhana dalam kotak dialog
  • Ada berbagai opsi pilihan untuk dipilih dan melakukan fungsi sesuai dengan opsi tersebut. Opsi dapat berupa pilihan sederhana seperti memilih alamat email yang berbeda

showDialog

  • Digunakan untuk membuat opsi yang akan memunculkan kotak dialog lainnya
  • Dengan menggunakan ini, kita dapat memunculkan berbagai jenis kotak dialog seperti AlertDialog dan SimpleDialog sebagai sub widget

Tutorial sebelumnya : Flutter Expanded
Tutorial setelahnya : Flutter Progress Indicator
Semua Tutorial Flutter : Tutorial Flutter

Tinggalkan Balasan