Project Aplikasi Expense Tracker – Part 3

Kita akan membahas widget ListView pada file expense_list.dart. ListView adalah widget untuk menampung widget dengan salah satu kelebihannya adalah scrollable, dapat mencegah issue error tampilan overflowed.

Error tampilan overflowed adalah area patern kuning hitam (lihat gambar dibawah)

Agar listview dapat berfungsi dengan tepat, column harus diwrap dulu dalam container, untuk menentukan height dari list yang kita miliki. Lihat tips wraping dibawah.

Widget build(BuildContext context) {
  return SingleChildScrollView(
    child: Container(
      height: 300,

Pada contoh diatas kita gunakan height 300, pada prakteknya untuk real app, kita perlu melakukan deteksi ukuran dari screen device.

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

import '../models/trans.dart';

class ExpenseList extends StatelessWidget {
  final List<Trans> _trans;

  ExpenseList(this._trans);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: ListView(
        children: _trans.map((trx) {
          return Card(
            child: Row(
              children: <Widget>[
                Container(
                  padding: EdgeInsets.all(6),
                  margin: EdgeInsets.symmetric(
                    vertical: 10,
                    horizontal: 15,
                  ),
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.red, width: 2)),
                  child: Text(
                    // 'Rp. ${trx.amount}',
                    NumberFormat.currency(symbol: 'Rp. ', decimalDigits: 0)
                        .format(trx.amount),
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 14,
                        color: Colors.red),
                  ),
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      trx.title,
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 12,
                      ),
                    ),
                    Text(
                      DateFormat.yMMMd().format(trx.txdate),
                      style: TextStyle(fontSize: 10, color: Colors.grey),
                    ),
                  ],
                )
              ],
            ),
          );
        }).toList(),
      ),
    );
  }
}

Jika Anda memiliki list yang besar, untuk mencegah penggunaan memory yang berlebihan, dapat digunakan ListView.builder(). List yang ditampilkan adalah list yang visible di screen.

ListView.builder perlu deklarasikan ukuran list. Sedangkan untuk mengisi list, gunakan property itemBuilder yang diisi dengan un-named function yang melakukan fetching data.

ListView.builder(
        itemCount: _trans.length,
        itemBuilder: (ctx, idx) {
          return Card(
            child: Row(
...
...
...
),

Data expense diakses dengan cara indexing. var idx adalah variable dari unnamed function diatas.

NumberFormat.currency(symbol: 'Rp. ', decimalDigits: 0).format(_trans[idx].amount),
_trans[idx].title
DateFormat.yMMMd().format(_trans[idx].txdate),

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

import '../models/trans.dart';

class ExpenseList extends StatelessWidget {
  final List<Trans> _trans;

  ExpenseList(this._trans);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: ListView.builder(
        itemCount: _trans.length,
        itemBuilder: (ctx, idx) {
          return Card(
            child: Row(
              children: <Widget>[
                Container(
                  padding: EdgeInsets.all(6),
                  margin: EdgeInsets.symmetric(
                    vertical: 10,
                    horizontal: 15,
                  ),
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.red, width: 2)),
                  child: Text(
                    // 'Rp. ${trx.amount}',
                    NumberFormat.currency(symbol: 'Rp. ', decimalDigits: 0)
                        .format(_trans[idx].amount),
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 14,
                        color: Colors.red),
                  ),
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      _trans[idx].title,
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 12,
                      ),
                    ),
                    Text(
                      DateFormat.yMMMd().format(_trans[idx].txdate),
                      style: TextStyle(fontSize: 10, color: Colors.grey),
                    ),
                  ],
                )
              ],
            ),
          );
        },
      ),
    );
  }
}

Tips Refactoring

Salah satu kemudahan dari refactoring adalah membantu kita dalam Wrapping sebuah widget.

Langkah Pertama, tempatkan cursor pada widget yang akan kita wrap. Misalnya column, click kanan, pilih menu refactor. Akan tampil lagi popup menu, pilih Wrap with widget.

Langkah berikutnya adalah kita ganti kata widget dengan widget yang kita inginkan. Kita tidak perlu mengkhawatirkan tanda kurung dan tanda lainnya. Semuanya akan ditambahkan otomatis, dapat mencegah error syntax.