[Flutter][80] Form (Bagian 8) Combobox dengan DropdownButton

Sunday, 08 Aug 2021 | By Riza

Image Load

Hello world,

Melanjutkan pembahasan tentang form, kali ini saya akan membahas tentang bagaimana cara membuat combobox pada flutter. Untuk membuat ComboBox pada flutter biasanya kita dapat menggunakan DropdownButton. Combobox atau DropdownButton biasanya kita gunakan untuk membuat form yang berisi pilihan yang ditampilkan dalam bentuk pilihan dropdown. Ada pula jenis pilihan lain yang berbentuk radiobutton yang akan saya bahas pada pembahasan selanjutnya. Perbedaannya adalah combobox/dropdownbutton lebih fleksible untuk pilihan dengan jumlah opsi yang lebih banyak.

Oke langsung saja masuk ke contohnya seperti berikut.

_selectedoption = 'Pilihan 1';
DropdownButton<String>(
value:
_selectedoption, items: <String>['Pilihan 1', 'Pilihan 2', 'Pilihan 3', 'Pilihan 4'].map((String value) { return DropdownMenuItem<String>( value: value, child: new Text(value), ); }).toList(), onChanged: (val) {
setState((){
_selectedoption = val;
})
}, )

Pada contoh sederhana di atas kita inisisasi dulu pilihan yang terpilih yaitu 'Pilihan 1' agar saat pertama dibuka pada dropdown sudah ada pilihan yang terpilih. Bisa juga kita buat satu opsi berisi text 'Pilih salah satu' sehingga pengguna bisa memilih pilihan lain. Kemudian ada items yang berisi opsi dalam bentuk list. List pilihan di sini dapat diisi dari list biasa ataupun dari JSON atau REST API. Kemudian ada onChanged yang kita gunakan untuk mengganti _selectedoption atau membuat action lain ketika pengguna mengganti pilihan.

Sebagai tambahan kita dapat menambahkan beberapa properti seperti icon dan lain-lain seperti berikut.

DropdownButton<String>(
value:
_selectedoption,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16, items: <String>['Pilihan 1', 'Pilihan 2', 'Pilihan 3', 'Pilihan 4'].map((String value) { return DropdownMenuItem<String>( value: value, child: new Text(value), ); }).toList(), onChanged: (val) {
setState((){
_selectedoption = val;
})
}, )

Selain itu ada beberapa tambahan lagi yang bisa ditambahkan seperti isExpanded yang berguna untuk membuat dropdown menyesuaikan lebar sesuai dengan lebar layar jika berisi true. Kemudian ada juga underline yang bisa kita hapus dengan cara diisi false. Selebihkan bisa dilihat di bawah ini.

DropdownButton(
{Key? key,
required List>? items,
DropdownButtonBuilder? selectedItemBuilder,
T? value,
Widget? hint,
Widget? disabledHint,
ValueChanged VoidCallback? onTap,
int elevation,
TextStyle? style,
Widget? underline,
Widget? icon,
Color? iconDisabledColor,
Color? iconEnabledColor,
double iconSize,
bool isDense,
bool isExpanded,
double? itemHeight,
Color? focusColor,
FocusNode? focusNode,
bool autofocus,
Color? dropdownColor,
double? menuMaxHeight}
)

Selamat mencoba :)