Performance pada Halaman Home Page yang over sehingga terjadi lagging

[ravihabibillah]

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 :

[ryfazrin]

setelah kucoba juga ditempatku, Performa ketika menggunakan listview manual

Performa ketika menggunakan GroupedView

[ryfazrin]

@ravihabibillah Lebih lag yang pake GroupedView wkwk