Flutter/Dart: Unsupported operation: Cannot add to an unmodifiable list
Image by Sadona - hkhazo.biz.id

Flutter/Dart: Unsupported operation: Cannot add to an unmodifiable list

Posted on

Are you tired of seeing the dreaded “Unsupported operation: Cannot add to an unmodifiable list” error in your Flutter app? Don’t worry, you’re not alone! In this article, we’ll dive deep into the world of Dart lists and explore what this error means, why it happens, and most importantly, how to fix it.

What is an unmodifiable list?

In Dart, lists can be either modifiable or unmodifiable. A modifiable list is one that can be changed after it’s created, whereas an unmodifiable list is, well, the opposite. Unmodifiable lists are essentially read-only, meaning you can’t add, remove, or modify its elements once it’s created.


// Modifiable list
List modifiableList = [];
modifiableList.add("Hello");
modifiableList.add("World");
print(modifiableList); // [Hello, World]

// Unmodifiable list
List unmodifiableList = List.unmodifiable(["Hello"]);
unmodifiableList.add("World"); // Error: Unsupported operation: Cannot add to an unmodifiable list

Why does this error occur?

The “Unsupported operation: Cannot add to an unmodifiable list” error occurs when you try to modify an unmodifiable list. This can happen in several ways:

  • Using the wrong constructor: When you create a list using the `List.unmodifiable()` constructor, it returns an unmodifiable list. If you then try to add elements to this list, you’ll get the error.
  • Using a list returned by a function: Some functions in Dart return unmodifiable lists. For example, the `toList()` method returns an unmodifiable list. If you try to add elements to this list, you’ll get the error.
  • Modifying a list in a widget’s build method: In Flutter, the `build` method is called repeatedly when the widget’s state changes. If you modify a list in the `build` method, you might get the error because the list is being reused and is now unmodifiable.

How to fix the error?

Fixing the “Unsupported operation: Cannot add to an unmodifiable list” error is relatively straightforward. Here are some solutions:

Solution 1: Use a modifiable list

If you need to modify a list, make sure to use a modifiable list. You can create a modifiable list using the `[]` syntax or the `List()` constructor.


ListmodifiableList = [];
modifiableList.add("Hello");
modifiableList.add("World");
print(modifiableList); // [Hello, World]

Solution 2: Convert an unmodifiable list to a modifiable list

If you have an unmodifiable list, you can convert it to a modifiable list using the `List.from()` constructor or the `toList()` method.


List unmodifiableList = List.unmodifiable(["Hello"]);
List modifiableList = List.from(unmodifiableList);
modifiableList.add("World");
print(modifiableList); // [Hello, World]

Solution 3: Use a different data structure

If you’re using a list in a situation where you don’t need to modify it, consider using a different data structure like a `Set` or a `Map`. These data structures are designed to be read-only, so you won’t get the “Unsupported operation” error.


Set set = {"Hello", "World"};
print(set); // {Hello, World}

Map map = {"Hello": 1, "World": 2};
print(map); // {Hello: 1, World: 2}

Best practices to avoid the error

To avoid the “Unsupported operation: Cannot add to an unmodifiable list” error, follow these best practices:

  1. Use the right constructor: Be mindful of the list constructor you use. If you need a modifiable list, use the `[]` syntax or the `List()` constructor.
  2. Check the list type: Before modifying a list, check its type to ensure it’s modifiable. You can do this using the `runtimeType` property.
  3. Avoid modifying lists in widget build methods: Try to avoid modifying lists in widget build methods, as this can lead to unexpected behavior and errors.
  4. Use defensive programming: When working with lists, assume they might be unmodifiable and add checks to prevent the error.
Constructor Modifiable Description
[] Yes Creates a modifiable list
List() Yes Creates a modifiable list
List.unmodifiable() No Creates an unmodifiable list
toList() No Returns an unmodifiable list

In conclusion, the “Unsupported operation: Cannot add to an unmodifiable list” error is a common issue in Flutter/Dart development, but it’s easily fixable by using the right constructor, checking the list type, and following best practices. By understanding the differences between modifiable and unmodifiable lists, you can write more robust and error-free code.

Additional resources

Here are 5 Questions and Answers about “Flutter/Dart: Unsupported operation: Cannot add to an unmodifiable list” in HTML format:

Frequently Asked Questions

Get the scoop on the most common conundrums surrounding Flutter and Dart’s “Unsupported operation: Cannot add to an unmodifiable list” error!

What does “Unsupported operation: Cannot add to an unmodifiable list” even mean?

This error occurs when you try to modify a list that’s been specifically designed to be unchangeable. In Dart, lists can be either modifiable (default) or unmodifiable. When you create an unmodifiable list, you’re essentially sealing its contents, making it impossible to add, remove, or modify its elements later on.

How do I know if a list is modifiable or unmodifiable in Dart?

In Dart, you can create an unmodifiable list using the `List.unmodifiable` constructor or by using the `List.from` method with an existing list. If you’re unsure whether a list is modifiable or not, try checking its runtime type using the `runtimeType` property or by using a debugger to inspect the list. Most of the time, you’ll want to use a modifiable list, but there are cases where an unmodifiable list is necessary, such as when you want to ensure data integrity.

What are some common scenarios where I might encounter this error?

You might encounter this error when working with Dart’s collection libraries, such as `List`, `Set`, or `Map`. For example, if you’re using a library that returns an unmodifiable list, or if you’re trying to modify a list that’s been passed as an argument to a function. You might also see this error when working with Flutter’s widgets, such as when trying to update a list of children in a `ListView`.

How do I fix this error?

The fix is usually straightforward: create a new, modifiable list by copying the original list using the `List.from` method or by using the spread operator (`…`). For example, `List myList = […originalList];`. This creates a new list that you can modify freely. Alternatively, you can use a `ListBuffer` to build a new list incrementally.

Are there any best practices to avoid this error in the future?

Yes! To avoid running into this error, make it a habit to always create a new, modifiable list when you need to modify a list. Use the `List.from` method or the spread operator (`…`) to create a copy of the original list. Additionally, when working with libraries or frameworks, always check the documentation to see if the returned lists are modifiable or not.