Menampilkan data pengeluaran/pemasukan ke dalam DropdownButtonFormField

[ryfazrin]

Didalam TransactionAddUpdatePage terdapat DropdownButtonFormField kategori yang mana didalamnya ada DropdownMenuItem.

kode DropdownButtonFormField

DropdownButtonFormField<String>(
  value: dropdownValue,
  items: itemData.toList(),
  onChanged: (String? newValue) {
    setState(() {
      dropdownValue = newValue!;
    });
  },
  decoration: InputDecoration(
    label: Text('Kategori'),
    icon: Icon(Icons.category),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(5.0),
    ),
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter some text';
    }
    return null;
  },
)

Kode itemData

var itemData = <String>[
  'Pilih',
  'tes1',
  'tes2',
  'tes3',
].map((String value) {
  return DropdownMenuItem(
    enabled: value == 'Pilih' ? false : true,
    value: value,
    child: Text(value),
  );
});

Misal aku ingin menampilkan Data dari provider.categoriesPengeluaran ke DropdownButtonFormField itu gimana ya?

karna masing-masing tipe datanya gini :

provider.categoriesPengeluaran: List<Category>
itemData.toList() : List<DropdownMenuItem<String>>

Ekspetasiku data categoriesPengeluaran bisa dibuat jadi List

var itemKategoriPengeluaran = <String>[
  'Makanan',
  'tes1',
  'Kesehatan',
  'Olahraga',
  'Belanja',
]

atau di jadikan data map langsung (data id dan nama)

var itemKategoriPengeluaran = {
  1 : 'Makanan',
  2 : 'tes1',
  3 : 'Kesehatan',
  4 : 'Olahraga',
  5 : 'Belanja',
};

[ravihabibillah]

itemData itu langsung ngambil dari dropdown ya?

contoh isi list dari itemData itu gimana? outputnya

[ryfazrin]

sudah bisa✔ ternyata gini vi

Pertama aku coba cek hasil dari getPengeluaran antara :

var category = provider.categoriesPengeluaran; // hasil : [Instance of 'Category', Instance of 'Category', Instance of 'Category', Instance of 'Category']
var categoryToMap = category.map((e) => e.name); // hasil : (Makanan, Kesehatan, Olahraga, Belanja)
var categoryToMapToList = categoryToMap.toList(); // hasil : [Makanan, Kesehatan, Olahraga, Belanja]

Tenyata categoryToMapToList sama tipe nya dengan itemData(tanpa di maping)

var itemData = <String>[
  'Pilih',
  'tes1',
  'tes2',
  'tes3',
];
print(itemData.runtimeType); // hasil : List<String>
print(categoryToMapToList.runtimeType); // hasil : List<String>

Jadi aku tambahkan aja seperti ini, setelah itu ku map dengan kembalian DropdownMenuItem

var itemDataWithCategoryList = itemData + categoryMapToList;

var itemDataWithCategoryMap =
    itemDataWithCategoryList.map((String value) {
  return DropdownMenuItem(
    enabled: value == 'Pilih' ? false : true,
    value: value,
    child: Text(value),
  );
});

Referensi : https://www.dicoding.com/academies/191/tutorials/7590 https://www.geeksforgeeks.org/how-to-combine-lists-in-dart/ https://belajarflutter.com/dart-map-key-values/

[ryfazrin]

@ravihabibillah keluarannya jadi gini vi

[ryfazrin]

@ravihabibillah agak panjang, tapi sudah solved

mungkin kalo ada yang lebih ringkas darimu, boleh tuh

[ravihabibillah]

yawis kalo udah bisa wkwk, gitu dulu aja, nanti nyoba pikirin lagi kalau mau ringkas gimana wkwk, menyusul nanti kalo udah coba di push trus di merge, biar ku coba2 nanti