Do’s and Don’ts when you use List in your DART CODE !!

Lists are the most loved data structure by Flutter Developers. But there are some mistakes that even Sr. Developers might do, which doesn’t affect the user, but highly affect the performance of your app! So let’s see them one by one.

Let’s suppose we have a list of int type as follows:

List<int> _items = [];

1. Add Elements:

Now, to add elements, we have the following 4 methods:

.add(E value): This method adds a single element of type E (here int, as we have List<int>) at the end of the list.
.addAll(List<E> value): This method adds all elements present in the list value into another list on which addAll is used.
.insert(int index, E element): This method inserts an element of type E at the mentioned index into the list.
.insertAll(int index, List<E> value): This method inserts the list value at the mentioned index into the list on which insertAll is used.

These methods can be used if you wish to add single elements in your list.

Now, if you wish to add some initial values to our _items list, usually we use for loop as follows:

for(int i=0; i<10; i++){
   _items.add(i);
}

However, for loops should be restricted as much as possible! It takes a lot of resources.

To do the above thing, we can use the .generate method of List class as follows:

_items = List.generate(10, (index) => index);
print(_items);

The output of the above will be:

[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

This takes up less memory compared to for loop.

2. Remove Element:

To remove a particular element, we can use .remove(E Value) This will remove the first occurrence of value in the List. Eg: _items.remove(2) This will remove the value 2 from the list _items.
To remove the last element from the list, we can use .removeLast() . Eg: _items.removeLast() . This will remove the last element (here value 9 ) from the list _items
To remove element at a particular index, we can use .removeAt(int index) . Eg: _items.removeAt(5) . This will remove the value of _items[5] .

Now, let’s say we want to remove all the even numbers from the list. We can do this in following ways:

Using for loop (don’t use):

for (int i = 0; i < _items.length; i++) {
    if (_items[i] % 2 == 0) 
        _items.removeAt(i);
}

Again, use for loop as least as possible!

Using for-each loop (better than forbut still, we have one better solution for this):

_items.forEach((element) {
    if (element % 2 == 0) _items.remove(element);
});

However, if you directly do the above code, you will get an exception

Concurrent modification during iteration: Instance(length:9) of '_GrowableList'.

It says that you can’t remove elements at the same time while accessing it. So, to use for-each, you need to assign the _items list to a _temp list, remove data from _templist and again assign _temp list to _items list, while looping on _items.

  List<int> _temp = [];
  _temp.addAll(_items);
  _items.forEach((element) {
    if (element % 2 == 0) _temp.remove(element);
  });
  _items.clear();
  _items.addAll(_temp);

So, you can see this is a lot of code just to remove some elements.

Using .removeWhere
This is one of the most efficient methods to remove elements based on some condition!

_items.removeWhere((element) => element % 2 == 0);

3. Update Element:

To update a particular element, we don’t have any inbuilt method. The obvious 2 solutions are using for and for-each loop. But they are not so efficient. So here’s a trick for the same:

_items = _items.map((e) => e % 2 == 0 ? e + 1 : e).toList();

We first converted our _items list into map and then made updates for each element. Then again we converted the map into a list and assign it back to _items

Hope you enjoyed this article!

If you loved it, you can Buy Me A Coffee!