Mastering Flutter Iterables: How We Made Our List Operations 10x Faster

When working with Iterables in Flutter, it’s essential to understand how different methods impact performance, especially when dealing with…

Back to all articles
News 9 min read View on medium.com

When working with Iterables in Flutter, it’s essential to understand how different methods impact performance, especially when dealing with heavy processing in where clauses.

Introduction

Optimizing Iterable operations in Flutter is a crucial element for app performance. By understanding and managing how .where() and .map operations resolve, we saved significant time, especially with complex data transformations.

Premise: Materializing intermediate results with .toList() helps avoid repeated evaluations, making your app more efficient and responsive. This optimization can dramatically cut down on processing time, giving your app a smoother, faster user experience.

Here’s a breakdown of why and how to manage these scenarios efficiently.

What is Iterable Resolution?

When an Iterable is resolved, all its elements are processed and evaluated. This means the Iterable’s internal iterator is advanced through each element sequentially, accessing each element in the collection and preparing it for potential operations. Simultaneously, any operations or conditions defined for the Iterable are executed for each element. This includes:

  • Applying filter conditions
  • Performing transformations
  • Executing any other specified operations on each element

Resolution occurs when an operation requires access to the actual values of the Iterable, rather than just its structure or definition. This process is computationally expensive, especially for large collections or complex operations.

When Resolution Occurs

When working with Iterables in Dart and Flutter, certain methods cause the Iterable to be fully resolved. Understanding these methods is crucial for optimizing performance, especially when dealing with heavy or complex operations.

Here are some key methods that cause resolution:

  1. length: Accessing the length of an Iterable forces it to be fully iterated to count the elements.
  2. isEmpty and isNotEmpty: Checking if an Iterable is empty or not requires iterating through the elements to determine the result.
  3. first and last: Accessing the first element usually requires iterating to the beginning, but accessing the last element forces full iteration.
  4. single: Ensures there is exactly one element in the Iterable, requiring a full iteration.
  5. elementAt(int index): Retrieves the element at the specified index, which may require iterating through the elements up to that index if the Iterable is not indexed.
  6. toList and toSet: Convert the Iterable into a List or Set, requiring full iteration to create the new collection.
  7. contains: Checks if a specific element is present, requiring iteration through the elements.
  8. reduce and fold: Apply a function to each element of the Iterable, requiring full iteration.
  9. every and any: Check a condition for the elements, iterating through until the condition is satisfied, or all elements have been checked.
  10. forEach: Applies a function to each element, requiring full iteration.

Laziness — Safe Operations

Regarding operational overhead (performance and memory), these are the operations that can be considered safe:

  1. Chaining: Using any of where(), map(), skip(), and take() methods don't iterate over the elements immediately. Instead, they return new Iterable objects that only process elements when needed.
  2. Assigning to variables: Simply assigning an Iterable to a variable doesn’t cause resolution.
  3. Passing as arguments: Passing an Iterable as an argument to a function doesn’t inherently cause resolution.

Chained Operations on Iterables

When you chain multiple operations like .where() and .map() on an Iterable, these operations are composed lazily. This means that the conditions or transformations are not immediately evaluated. Instead, they are only applied when the final result is actually needed, such as when converting to a list or accessing elements.

However, without proper materialization, repeated access to the result can lead to repeated evaluations of the entire chain. This is especially problematic when dealing with heavy processing in the chain.

For example:

import 'dart:io';

final Iterable numbers = Iterable.generate(10, (index) => index + 1); // [1, 2, 3, ..., 10]

// First we filter with where
final Stopwatch stopwatch = Stopwatch()..start();
final Iterable evens = numbers.where((num) {
  // Simulate a 1-second delay
  sleep(Duration(seconds: 1));
  return num % 2 == 0;
});
final int evensLength = evens.length;
stopwatch.stop();
print('Length after where: $evensLength (Time: ${stopwatch.elapsed.inSeconds} seconds)');

// Then we map the filtered result
stopwatch.reset();
stopwatch.start();
final Iterable doubled = evens.map((num) {
  return num * 2;
});
final int doubledLength = doubled.length;
stopwatch.stop();
print('Length after map (doubled): $doubledLength (Time: ${stopwatch.elapsed.inSeconds} seconds)');

// Next, we add another operation, like incrementing by 1
stopwatch.reset();
stopwatch.start();
final Iterable incremented = doubled.map((num) {
  return num + 1;
});
final int incrementedLength = incremented.length;
stopwatch.stop();
print('Length after map (incremented): $incrementedLength (Time: ${stopwatch.elapsed.inSeconds} seconds)');

// Finally, we filter out numbers greater than 10
stopwatch.reset();
stopwatch.start();
final Iterable filtered = incremented.where((num) {
  return num <= 10;
});
final int filteredLength = filtered.length;
stopwatch.stop();
print('Length after where (filtered): $filteredLength (Time: ${stopwatch.elapsed.inSeconds} seconds)');

In this example, even though we chain multiple operations, they are not evaluated immediately. However, each time we access length, the entire chain of operations is re-evaluated, including the heavy processing in the where clause. This leads to repeated, expensive computations.

To avoid this, you can materialize the result after chaining operations, which we'll discuss in the next section.

Avoiding Multiple Resolutions

To avoid redundant processing, you can materialize the intermediate result by converting it to a List:

import 'dart:io';

final Iterable numbers = Iterable.generate(10, (index) => index + 1); // [1, 2, 3, ..., 10]

// First we filter and convert the result to a List
final Stopwatch stopwatch = Stopwatch()..start();
final List evens = numbers.where((num) {
  // Simulate a 1-second delay
  sleep(Duration(seconds: 1));
  return num % 2 == 0;
}).toList();
final int evensLength = evens.length;
stopwatch.stop();
print('Length after where: $evensLength (Time: ${stopwatch.elapsed.inSeconds} seconds)');

// Then we map the filtered result
stopwatch.reset();
stopwatch.start();
final List doubled = evens.map((num) => num * 2).toList();
final int doubledLength = doubled.length;
stopwatch.stop();
print('Length after map (doubled): $doubledLength (Time: ${stopwatch.elapsed.inSeconds} seconds)');

// Next, we add another operation, like incrementing by 1
stopwatch.reset();
stopwatch.start();
final List incremented = doubled.map((num) => num + 1).toList();
final int incrementedLength = incremented.length;
stopwatch.stop();
print('Length after map (incremented): $incrementedLength (Time: ${stopwatch.elapsed.inSeconds} seconds)');

// Finally, we filter out numbers greater than 10
stopwatch.reset();
stopwatch.start();
final List filtered = incremented.where((num) => num <= 10).toList();
final int filteredLength = filtered.length;
stopwatch.stop();
print('Length after where (filtered): $filteredLength (Time: ${stopwatch.elapsed.inSeconds} seconds)');

By converting the filtered result to a List with .toList(), the where clause will only be applied once, and subsequent operations (like map) will work on the materialized list, significantly reducing the number of heavy evaluations.

Comparison Table

Simplified Example:

Here’s how it looks with chained operations directly on the sequence:

import 'dart:io';

final Iterable numbers = Iterable.generate(10, (index) => index + 1); // [1, 2, 3, ..., 10]

// First we filter, map, map, and then get length
final Stopwatch stopwatch = Stopwatch()..start();
final int filteredLength = numbers
  .where((num) {
    // Simulate a 1-second delay
    sleep(Duration(seconds: 1));
    return num % 2 == 0;
  })
  .map((num) => num * 2)
  .map((num) => num + 1)
  .where((num) => num <= 10)
  .length;
stopwatch.stop();
print('Length after all chained operations: $filteredLength (Time: ${stopwatch.elapsed.inSeconds} seconds)');import ‘dart:io’;

Materializing Intermediate Result

import 'dart:io';

final Iterable numbers = Iterable.generate(10, (index) => index + 1); // [1, 2, 3, ..., 10]

// First we filter and convert the result to a List
final Stopwatch stopwatch = Stopwatch()..start();
final int filteredLength = numbers
  .where((num) {
    // Simulate a 1-second delay
    sleep(Duration(seconds: 1));
    return num % 2 == 0;
  })
  .toList() // note this!
  .map((num) => num * 2)
  .map((num) => num + 1)
  .where((num) => num <= 10)
  .length;
stopwatch.stop();
print('Length after all materialized operations: $filteredLength (Time: ${stopwatch.elapsed.inSeconds} seconds)');

Once you call .toList(), the Iterable is fully resolved. Subsequent operations like .map work on the already processed List, which means they don’t incur the same time cost as they would on an unresolved Iterable.

This is why materializing the result with .toList() can optimize performance significantly, especially when dealing with multiple operations.

Expected Chained Output

(This code is faster than first chained example because we only have 1 length call, not 4)

Length after all chained operations: 5 (Time: 50 seconds)

Materializing Intermediate Result:

Length after all materialized operations: 5 (Time: 10 seconds)

Preventing Multiple Resolutions: The Importance of Proper Assignments

When working with Iterables in Flutter, it’s essential to recognize that simply returning a List from a function or using .toList() isn’t enough to prevent multiple resolutions. The way you assign the result also plays a crucial role in optimizing performance.

The Issue with Method Calls on Iterables

Even if a function returns a List, assigning the result to an Iterable can still lead to multiple resolutions. Each call to methods like .length, .map, or .where on an Iterable will trigger a full resolution. This can lead to significant performance costs, especially if the Iterable involves heavy or complex operations.

For example, consider a function that returns a List:

List generateNumbers() {
  return List.generate(10, (index) => index); // [1, 2, 3, ..., 10]
}

// Assigning to an Iterable
Iterable numbers = generateNumbers();

// Operations on `numbers` will cause multiple resolutions
final int length = numbers.length; // Causes resolution
final Iterable mappedNumbers = numbers.map((number) => number * 2); // Causes resolution again

Each of these operations forces the Iterable to resolve, incurring the associated time costs repeatedly.

The Importance of Assigning to a List

By explicitly assigning the result to a List variable, you ensure that the data is fully resolved once, and subsequent operations are performed on the already-resolved data:

List generateNumbers() {
  return List.generate(10, (index) => index); // [1, 2, 3, ..., 10]
}

// Assigning to a List
List numbers = generateNumbers();

// Efficient operations without additional resolutions
final int length = numbers.length; // No additional resolution needed
final List mappedNumbers = numbers.map((number) => number * 2).toList(); // Efficient operations

Assigning to a List ensures that the heavy computation happens once, and further operations are efficient.

Code Review Checklist

Ensuring efficient resolution of Iterables in Flutter is crucial for maintaining optimal performance. Here are the key practices you should adopt, structured by different language parts:

When conducting a code review with a focus on optimizing Iterable operations, here are key patterns and practices to search for:

Variables

Regex: Iterable<(.*) =\s*(?!\s*>)

Always assign Iterable results to List variables to avoid multiple resolutions. Using Lists ensures that operations like .length, .map, and .where are efficient.

List numbers = generateNumbers().toList(); // Efficient

Fields

Regex: Iterable<(.*);

When defining fields in classes, ensure they are assigned as Lists instead of Iterables. This prevents multiple resolutions and enhances performance.

class Example {
  List? get items { } // Use List instead of Iterable
}

Parameters

Manual review function parameters defined as Iterable<T>, even across multiple lines.

Ensure functions that accept collections as parameters convert them to Lists if necessary to prevent multiple resolutions within the function.

void processItems(List items) { // Accept List as parameter
  final List processedItems = items.where((item) => /* condition */).toList();
}

Loops

Manual review loops and maps.

Regex: for \((.*)\((.*)\)

When looping over a collection, materialize the result to a List first to avoid resolving the iterable multiple times during the loop.

List numbers = generateNumbers().toList(); // Materialize to List first
for (int number in numbers) {
  // Efficiently process each number
}

Efficient Helpers

There are some workarounds, but they are generally not recommended:

extension IterableExtensions on Iterable {
  /// Alias for isEmpty that checks if the Iterable contains any elements.
  ///
  /// The method uses `take(1)` to efficiently determine if the Iterable has
  /// at least one element without resolving the entire collection.
  /// This helps in optimizing performance and avoiding the overhead
  /// of processing the entire iterable when only the presence of an element is needed.
  ///
  /// Returns `true` if there is at least one element, `false` otherwise.
  bool get hasAny {
    return take(1).isNotEmpty;
  }

  /// Alias for isNotEmpty that checks if the Iterable has no elements.
  ///
  /// The method uses `take(1)` to efficiently determine if the Iterable has
  /// at least one element without resolving the entire collection.
  /// This helps in optimizing performance and avoiding the overhead
  /// of processing the entire iterable when only the presence of an element is needed.
  ///
  /// Returns `false` if there is at least one element, `true` otherwise.
  bool get hasNotAny {
    return take(1).isEmpty;
  }
}

Key Takeaway

Understanding how Flutter’s Iterable methods work and their side effects can help you write more efficient code. Avoid multiple resolutions by materializing intermediate results when necessary, ensuring your app runs smoothly even with heavy processing operations.

With a 30-year journey in tech, I’ve worn many hats, from coding to managing industry-leading and international projects. I’m passionate about sparking curiosity and deepening our understanding of complex topics.

If you have any suggestions or thoughts on this article, I welcome your feedback.

Learn more at saropa.com

Illustration from article
saropa.com
Share this article

Your feedback is essential to us, and we genuinely value your support. When we learn of a mistake, we acknowledge it with a correction. If you spot an error, please let us know at blog@saropa.com and learn more at saropa.com.

Originally published by Saropa on Medium on November 6, 2024. Copyright © 2024

flutter optimization lists performance best-practices