A convenient way to render items into the screen in a scrollable manner is a ListView() which takes in children argument and it will render the children on the screen and if the number of children doesn't fit the screen you can scroll up and down. 

The column does not allow you to scroll up and down so if the number of children is more than what fits on the screen you will get a sizing error in flutter. 

 

 

LisstView has an infinit hight and by default it should have some constraint on the hight by it's parent widgent in order to show up on the screen, if you pass in a ListView() without parental height constraint you will get an error: "Vertical viewpoint given unbound height" which means flutter doesnt know how much height to put aside for the given list view, so it's good practice to wrap ListView in a container or something and give the container a hight.

 

example of a basic list view: 

class TransactionList extends StatelessWidget {
  final List<Transaction> transactions;

  TransactionList(this.transactions);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: ListView(
        children: transactions.map((tx) {
          return Card(
            elevation: 10,
            shadowColor: Colors.blue,
            child: Row(
              children: [
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                  child: Text(
                    '\$${tx.amount}',
                    style: TextStyle(
                      color: Colors.blue,
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(
                        color: Colors.blue,
                        width: 2,
                      )),
                  padding: EdgeInsets.all(8),
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      tx.title,
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 17,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Text(
                      DateFormat.yMMMMd().format(tx.date),
                      style: TextStyle(
                          fontWeight: FontWeight.w400, color: Colors.grey),
                    ),
                  ],
                )
              ],
            ),
          );
        }).toList(),
      ),
    );
  }
}

 

listview with children will render all of it's children even if they are not on the screen and this is not very efficient if the number of children is big, listview.builder() is a more effective way of overcoming this issue, listview.builder() will only render children which are on screen or close to the screem. 

 

 

listview.builder() example:

return Container(
      height: 400,
      child: ListView.builder(
        itemCount: transactions.length,
        itemBuilder: (context, index) {

 

item builder is a compulsory argument and it must be provided and it accepts a function with two parameters (context,index) , context is for flutter to manage the context so you don't need to worry about it, index is the index of your iterable or children which will be passed to the item builder, 

item count will be the number of children inside list view, in my case it will be the length of transactions

 

class TransactionList extends StatelessWidget {
  final List<Transaction> transactions;

  TransactionList(this.transactions);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      child: ListView.builder(
        itemCount: transactions.length,
        itemBuilder: (context, index) {
          return Card(
            elevation: 10,
            shadowColor: Colors.blue,
            child: Row(
              children: [
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                  child: Text(
                    '\$${transactions[index].amount}',
                    style: TextStyle(
                      color: Colors.blue,
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(
                        color: Colors.blue,
                        width: 2,
                      )),
                  padding: EdgeInsets.all(8),
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      transactions[index].title,
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 17,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Text(
                      DateFormat.yMMMMd().format(transactions[index].date),
                      style: TextStyle(
                          fontWeight: FontWeight.w400, color: Colors.grey),
                    ),
                  ],
                )
              ],
            ),
          );
        },
      ),
    );
  }
}