ravihabibillah / money_writer_app

This project is for Capstone in Independent Studies program from Dicoding X Kampus Merdeka
3 stars 1 forks source link

Menampilkan data pengeluaran/pemasukan ke dalam DropdownButtonFormField #9

Closed ryfazrin closed 2 years ago

ryfazrin commented 2 years ago

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 commented 2 years ago

itemData itu langsung ngambil dari dropdown ya?

contoh isi list dari itemData itu gimana? outputnya

ryfazrin commented 2 years ago

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 commented 2 years ago

@ravihabibillah keluarannya jadi gini vi Screenshot_2021-11-25-10-39-41-544_com example money_writer_app

ryfazrin commented 2 years ago

@ravihabibillah agak panjang, tapi sudah solved

mungkin kalo ada yang lebih ringkas darimu, boleh tuh

ravihabibillah commented 2 years ago

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