Closed ravihabibillah closed 2 years ago
ketika menggunakan listview manual
ListView.builder( shrinkWrap: true, itemCount: itemCardData.length, itemBuilder: (BuildContext context, int index) { var listItemTransaction = []; var totalPemasukan = 0; var totalPengeluaran = 0; for (var item in provider.transactionsDay) { if (item.transaction_date == itemCardData[index].transaction_date) { listItemTransaction.add(item); if (item.type == 'pengeluaran') { totalPengeluaran += item.amount; } else { totalPemasukan += item.amount; } } } return Card( child: Padding( padding: const EdgeInsets.all(8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( itemCardData[index].transaction_date, style: Theme.of(context).textTheme.headline6, ), Padding( padding: const EdgeInsets.symmetric( horizontal: 16.0, vertical: 4.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( 'Rp. $totalPemasukan', style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 16.0, color: Colors.blue, ), ), Text( 'Rp. $totalPengeluaran', style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 16.0, color: Colors.red, ), ), ], ), ), const Divider(), ListView.builder( itemCount: listItemTransaction.length, physics: const ClampingScrollPhysics(), shrinkWrap: true, itemBuilder: (BuildContext context, int index) { return ListTile( leading: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(listItemTransaction[index] .name_categories .toString()), ], ), title: Text(listItemTransaction[index] .description), /** * properti subtitle hanya percobaan * untuk menampilkan data type dan transaction_date */ subtitle: Text( listItemTransaction[index].type + ' : ' + listItemTransaction[index] .transaction_date), trailing: Text( listItemTransaction[index] .amount .toString(), style: TextStyle( // terapkan check data pengeluaran atau pemasukan color: listItemTransaction[index] .type == 'pengeluaran' ? Colors.red : Colors.blue, ), ), onTap: () { Navigator.pushNamed( context, TransactionAddUpdatePage.routeName, arguments: listItemTransaction[index], ); }, ); }, ) ], ), ), ); }),
Performa
Ketika menggunakan GroupedView
GroupedListView<dynamic, String>( elements: provider.transactionsMonth, groupBy: (element) => element.transaction_date, // groupComparator: (value1, value2) => value2.compareTo(value1), order: GroupedListOrder.DESC, groupSeparatorBuilder: (String value) { return Padding( padding: const EdgeInsets.all(8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( value, style: Theme.of(context).textTheme.headline6, ), Padding( padding: const EdgeInsets.symmetric( horizontal: 16.0, vertical: 4.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( 'Rp. 0', style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 16.0, color: Colors.blue, ), ), Text( 'Rp. 0', style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 16.0, color: Colors.red, ), ), ], ), ), Divider(), ], ), ); }, itemBuilder: (c, element) { return Padding( padding: const EdgeInsets.all(8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ ListTile( leading: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(element.name_categories.toString()), ], ), title: Text(element.description), /** * properti subtitle hanya percobaan * untuk menampilkan data type dan transaction_date */ subtitle: Text( element.type + ' : ' + element.transaction_date), trailing: Text( element.amount.toString(), style: TextStyle( // terapkan check data pengeluaran atau pemasukan color: element.type == 'pengeluaran' ? Colors.red : Colors.blue, ), ), onTap: () { // final selectedTransaction = // await provider.getTransactionById( // provider.transactions[index].id!); Navigator.pushNamed( context, TransactionAddUpdatePage.routeName, arguments: element, // arguments: Transactions( // id: null, // description: provider // .transactions[index].description, // amount: // provider.transactions[index].amount, // transaction_date: provider // .transactions[index] // .transaction_date, // id_categories: provider // .transactions[index].id_categories, // type: provider.transactions[index].type, // ), ); }, ), ], ), ); }, ),
Performanya :
setelah kucoba juga ditempatku, Performa ketika menggunakan listview manual
Performa ketika menggunakan GroupedView
@ravihabibillah Lebih lag yang pake GroupedView wkwk
ketika menggunakan listview manual
Performa
Ketika menggunakan GroupedView
Performanya :