List

List in Dart just like an array in Javascript with minor differenes. It is an ordered collection of objects of same data type.

var list = [10, 20, 30];

If you use var, the Dart compiler will automatically detect the data type of List item and treat the List as int type. So in the above example, the List list has type List<int>

If you try to add non integer object to the above list, it will result an error.

How to access List item

In Dart, index starts with 0 and not 1. To access an item use the following syntax:

var item = list[index];

For example,

assert(list[1] == 20);
assert(list[0] == 10);

Length

To get the total number of element in the List, use length property.

assert(list.length == 3);

Update an Item

To update an existing item in the List, use [index] notation to assign a value.

list[0] = 5;
list[1] = 6;
list[2] = 7;

assert(list[1] == 6);

// New List:
// [5, 6, 7]

Making List literal Constant

Sometimes you may want to make the list literal compile time constant. Just add const right before the list literal. Consider the following example:

var constList = const [1, 2, 3];

The list above is now a constant and any further modification to the list is not allowed.

Properties of List

first

To get the first element from the List use the property first.

var list = [1, 2, 3];
print("The first element is ${list.first}"); // The first element is 1

last

To get the last item from the List use the property last.

var list = [1, 2, 3];
print("The last element is ${list.last}"); // The last element is 3

length

To get the total number of elements in the list, use length property.

var list = [1, 2, 3, 4, 5, 10];
print("Total element = ${list.length}"); // Total element = 6

reversed

To reverse the list, use reversed property. This property returns an iterable list which is reversed of the original list. Note that, this property doesn't change anything to the original list. It creates a new list in the reverse order and returns it.

var list = [10, 20, 30];
print(list.reversed);
print(list);

isEmpty

This property returns true, if the list contains no element. Otherwise it returns false.

var list = [1, 2, 3];
print(list.isEmpty); // false
var emptyList = [];
print(emptyList.isEmpty); // true

List Methods

add(value)

This method adds an element to the end of the list. This method is used to add single element to the list.

var list = [1, 2, 3];
list.add(4);
print(list); // [1, 2, 3, 4]

addAll(iterable)

To add more than one element at a time, use addAll() method. It takes an iterable object as the first argument and add each element one by one to the end of the list.

var list = [1, 2, 3];
var list2 = [4, 5, 6];
list.addAll(list2);
print(list); // [1, 2, 3, 4, 5, 6]

clear()

This method is used to make the list empty. It deletes all the element. The length becomes zero.

var list = [1, 2, 3];
list.clear();
print(list.length); // 0

List.generate() Constructor

One of very handy utility in Dart is the ability to generate a list of values.

List<E>.generate(
  int length,
  E generator(
    int index
  ), {
  bool growable: true
})

The first parameter is to specify the size of the list.

The second parameter is a generator callback that produces list values. It receives new index for each new item in increasing order. The callback must return the value which is the list item.

The created list is fixed-length unless growable is true.

The following example generates all numbers from 1 to 10.

new List<int>.generate(10, (i) => i + 1)

We can generate all square numbers.

new List<int>.generate(10, (i) => i * i)

A more practical application of List.generate constructor is to generate a list of widget from a list of items.

List daysData = [
	{"label": "7 Days", "value": 7},
	{"label": "15 Days", "value": 15},
	{"label": "30 Days", "value": 30},
	{"label": "60 Days", "value": 60},
	{"label": "100 Days", "value": 100},
];

@override
Widget build(BuildContext context) {
	return Row(
		children: List.generate(daysData.length, (int index) {
			Map<String, dynamic> dayData = daysData[index];
			String dayLabel = dayData["label"];
  			return Padding(
				padding: EdgeInsets.only(right: 15),
				child: Text("$dayLabel"),
			);
		}),
	);
}