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
.