Sử dụng ListView để hiện các danh sách trong một biết kiểu List

 Nội dung chính của bài này là khi chúng ta có một mãng chứa các phần tử được thêm vào trước đó, công việc còn lại là hiển thị nó lên giao diện, cho phép cuộn lên xuống để xem các phần tử trong danh sách. 

Code:

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

class ListOfCost extends StatelessWidget {
  // Khai báo một biến kiểu danh sách
  List<Transaction> transactions;

  ListOfCost({this.transactions});

  // Xây dựng 1 ListView
  ListView _buildListView() {
    return ListView.builder(
        itemCount: transactions.length,
        itemBuilder: (context, index) {
          int _mau = 0;
          //Với mỗi phần tử của danh sách, thì dùng 1 Widget Card để hiển thị nội dung
          return Card(
            shape: RoundedRectangleBorder(
              //Bo tròn các góc cho Card
              borderRadius: BorderRadius.circular(4),
              ),
            //elevation: là độ cao của Card so với background
            elevation: 1,
            //Chổ này dùng biến Index chẵn/lẻ để hiển thị màu cho Card
            color: (index % 2) == 0 ? Colors.blueAccent : Colors.greenAccent,
            child: ListTile(
              leading: Icon(Icons.edit),
              //Lấy thuộc tính cost của phần tử thứ Index trong danh sách
              title: Text(transactions[index].cost, style: TextStyle(
              fontSize: 16, color: Colors.black, fontWeight: FontWeight.bold
          ),),
              //Lấy giá trị thuộc tính amount của phần từ thứ Index trong danh sách
              subtitle: Text('Amount: ${transactions[index].amount}'),
              onTap: () {
                //Khi chạm vào vào 1 Card
                print('you are clicking to ${transactions[1].cost}');
                  },
            ),
          );
        }
        );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 500,
      //Gọi hàm xây dựng ListView ở trên
      child: this._buildListView(),
    );
  }
}