Halo teman – teman,
Kali ini kita akan membahas menu DropdownButton pada Flutter. DropdownButton ini berfungsi ketika kita memiliki beberapa pilihan dalam inputan data, misalnya saja untuk pemilihan kota / lokasi tujuan, pemilihan metode pembayaran, jenis kelamin dan lain sebagainya.

Dengan penggunaan DropdownButton ini, data yang di input menjadi lebih tepat, misalnya saja jika kita hanya menggunakan TextField untuk penulisan jenis kelamin, tentu nantinya akan menjadi lebih misalnya pria, laki – laki, perempuan, wanita. Untuk menghindari data yang seperti itu makanya kita gunakan opsi pilihan hanya dengan pria – wanita, atau laki – laki dan perempuan.

Nah, untuk membuat DropdownButton ini kita menggunakan statefull widget, karena kita memerlukan setState agar dapat terjadinya perubahan data.

Tambahkan data berikut :

 List<String> listKota = ["Pariaman", "Padang", "Bukittingi", "Solok", "Sawah Lunto", "Padang Panjang"];

  String nKota = "Pariaman";
  int? nilaiKota;

  void pilihKota(String value){ //menampilkan kota yang dipilih
    setState(() {
      nKota = value;
    });
  }

List ini akan berfungsi untuk data dropdown kita nanti,
nKota berfungsi sebagai value
nilaiKota berfungsi untuk menampilkan urutan berdasarkan index ke berapa di dalam list

Selanjutnya kita akan membuat DropdownButton nya

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page Drop Down Menu'),
        backgroundColor : Colors.orangeAccent,
      ),
      body: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Lokasi'),
              SizedBox(width: 20),
              DropdownButton(
                value: nKota,
                onChanged: (String ? value){
                  pilihKota(value??"");    //perubahaan saat kota di pilih
                  nilaiKota = listKota.indexOf(value??""); //mengambil nilai index berdasarkan urutan list
                },
                items: listKota.map(
                    (String value){
                        return DropdownMenuItem( //tampilan isi data dropdown
                          child: Text(value),
                          value: value,
                        );
                    }
                ).toList(),
              )
            ],
          ),
          Container(
            child: MaterialButton(
              child: Text('Submit'),
              color: Colors.blueGrey,
              textColor: Colors.white,
              onPressed: (){
                print("Kota yang dipilih :" +"$nilaiKota"+nKota); //print data ketika menekan tombol submit
              },
            ),
          )
        ],
      ),
    );
  }

Berikut hasil dari running project :
Saat menekan tombol submit, maka akan menampilkan hasil sesuai data yang di pilih