Dropdown

Flutter Dropdown Menu From Rest APIMedium

String dropdownValue = 'One';

@override
Widget build(BuildContext context) {
  return DropdownButton<String>(
    value: dropdownValue,
    icon: Icon(Icons.arrow_downward),
    iconSize: 24,
    elevation: 16,
    style: TextStyle(
      color: Colors.deepPurple
    ),
    underline: Container(
      height: 2,
      color: Colors.deepPurpleAccent,
    ),
    onChanged: (String newValue) {
      setState(() {
        dropdownValue = newValue;
      });
    },
    items: <String>['One', 'Two', 'Free', 'Four']
      .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      })
      .toList(),
  );
}

ini untuk multi seperti kecamatan, kabupaten

Flutter Branched Dropdown Menu From Rest API - UDACODINGUDACODING

Flutter Branched Dropdown Menu From Rest APIMedium

Asslamu’alaikum Wr. Wb.

Hallo sobat flutter kembali lagi di posting saya , pada postingan kali ini saya akan membahas tentang Dropdown Menu Button apasih Dropdown Menu Button itu, Dropdown Menu Button adalah sebuah menu yang menampilkan sebuah daftar data yang fungsinya untuk memilih suatu nilai data itu sendiri untuk di inputkan kedalam suatu data global, tapi pada postingan kali ini kita akan melanjutkan materi yang kemarin menggukan rest api sebagai datanya dan kita akan buat bercabang atau saling berhubungan contohnya ketika kita memilih suatu tujuan lokasi pada saat pembelian kita akan di tampilkan sebuah dropdown dengan sebuah list array provinsi dan setelah selesai memilih array provinsi maka akan muncul otomatis list arrray kota sesuai dengan provinsi yang kita pilih okeh langsung saja kita mulai:

1. Sebelumnya kita telah membuat project ini pada saat kemarin kalian dapat melihat projectnya di link berikut ini :

2. Lalu kita bisa tambahkan sebuah method baru yang mana itu untuk mengirim request terhadap webservice disini saya menggunakan contoh setelah memilih provinsi maka dia akan melakukan request untuk meminta data kota sesuai dengan id provinsi nya maka kita akan membuat sebuah fungsi method yang mana dia membutuhkan parameter id provinsi itu sendiri kurang lebih seperti ini

3. Setelah terbuat maka ada sedikit perubahan pada dropdown button yang pertama, dikarenakan pada suatu saat ketika melakukan request untuk meminta data city atau kota kita memerlukan id provinsi maka value pada dropdown provinsi kita ganti menjadi nilai id nya bukan nilai nama provinsinya dan pada bagian onchange setelah kita men set atau memberi tahu ada perubahan di dalam _valProvince maka kita jalan kan juga fungsi method untuk merequest data kota yang tadi telah kita buat yang mana isian parameter nya adalah value itu sendiri kurang lebih seperti ini :

Text("Silahkan pilih provinsi tujuan"),

DropdownButton(
  hint: Text("Select Province"),
  value: _valProvince,
  items: _dataProvince.map((item){
    return DropdownMenuItem(
      child: Text(item['province']),
      value: item['id'],
    );
  }).toList(),
  onChanged: (value) {
    setState(() {
      _valProvince = value;
    });
    getCity(value);
  },
),

4. Kemudian kita buat Dropdown yang kedua untuk menu list kota nya seperti ini :

Text("Silahkan pilih kota tujuan"),DropdownButton(
  hint: Text("Select City"),
  value: _valCity,
  items: _dataCity.map((item){
    return DropdownMenuItem(
      child: Text("${item['type']} ${item['city']}"),
      value: item['id'],
    );
  }).toList(),
  onChanged: (value) {
   setState(() {
     _valCity = value;
   });
  },
),

5. Oke pada tahap kali ini kita dapat menampilkan kota sesuai dengan nama nya akan tetapi masih ada problem satu lagi, yah benar pada saat kita mengganti pilihan provinsi untuk kedua kalinya maka aplikasi kita akan memunculkan sebuah error seperti ini :

Nah disini error nya menjelaskan bahwa item atau value nya harus null nah pertanyaanya value siapa yang harus kita null, yah benar valuenya si kota atau city jadi ketika kita memilih provinsi untuk kedua kalinya maka kita harus mereset ulang nilai value pada nilai value kota menjadi null lagi, lalu dimana kita mereset nilai value nya yaitu pada saat terjadi perubahan pada saat mengganti provinsi, yah benar kita taruh pada setState perubahan provinsi kurang lebih seperti ini :

Text("Silahkan pilih provinsi tujuan"),

DropdownButton(
  hint: Text("Select Province"),
  value: _valProvince,
  items: _dataProvince.map((item){
    return DropdownMenuItem(
      child: Text(item['province']),
      value: item['id'],
    );
  }).toList(),
  onChanged: (value) {
    setState(() {
      _valProvince = value;
      _valCity = null;
    });
    getCity(value);
  },
),

6. Maka kurang lebih untuk full source code nya seperti ini :

7. Maka ketika kita running maka tampilannya seperti ini :