DropdownButton in Flutter

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

spot_imgspot_img

Subscribe

Related articles

Memanfaatkan Include Dan Required Function Pada PHP

 Halo teman-teman sobat baraja udacoding, selamat datang kembali di...

CARA MEMBUAT KONEKSI DATABASE DI PHP

Halo teman-teman, selamat datang kembali di baraja uda coding....

Pseudo Class Dan Penggunaannya part 2

Anchor Pseudo-classesMerubah link dengan beberapa cara yang berbeda tergantung...

Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa...

Mengenal Pseudo Element Dan Penggunaannya part 2

Seperti yang kita semua ketahui tentang Pseudo Element pada artikel...
spot_imgspot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here