Home Mobile Flutter – Show Modal Bottom Sheet

Flutter – Show Modal Bottom Sheet

0

showModalBottomSheet adalah salah satu widget yang ada di Flutter yang digunakan untuk menampilkan bottom sheet. Bottom sheet adalah sebuah kontainer yang ditampilkan di bagian bawah layar yang dapat menampilkan konten tambahan, seperti menu atau dialog.

showModalBottomSheet digunakan untuk menampilkan bottom sheet yang bersifat modal, artinya bottom sheet tersebut harus ditutup sebelum pengguna dapat berinteraksi dengan konten lain di layar. Widget ini menerima sebuah BuildContext sebagai parameter yang digunakan untuk membangun bottom sheet.

Berikut ini adalah sintaks dari showModalBottomSheet di Flutter:

showModalBottomSheet<T>(
  context: BuildContext context,
  builder: (BuildContext context) {
    // Membangun widget bottom sheet
    return Widget;
  },
);

Parameter builder harus mengembalikan sebuah widget yang merupakan isi dari bottom sheet. Anda dapat membuat tampilan apapun yang Anda inginkan pada bottom sheet tersebut, seperti list atau form.

Selain itu, Anda juga dapat menentukan nilai kembalian dari bottom sheet dengan menambahkan tipe data generic T pada showModalBottomSheet. Misalnya, jika Anda ingin menentukan nilai kembalian yang berupa String, Anda dapat menuliskan kodenya seperti berikut:

String result = await showModalBottomSheet<String>(
  context: context,
  builder: (BuildContext context) {
    // Membangun widget bottom sheet
    return Widget;
  },
);

Anda juga dapat menambahkan animasi atau efek transisi ketika bottom sheet ditampilkan dengan menggunakan parameter animation dan transitionAnimation pada showModalBottomSheet.

Berikut ini adalah contoh penggunaan showModalBottomSheet di Flutter untuk menampilkan bottom sheet sederhana:

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      child: Center(
        child: Text('Ini adalah bottom sheet'),
      ),
    );
  },
);

Pada contoh di atas, showModalBottomSheet digunakan untuk menampilkan bottom sheet yang berisi sebuah teks “Ini adalah bottom sheet”. Karena tidak ada tipe data generic yang ditentukan, maka nilai kembalian dari bottom sheet ini adalah null.