How to split a List into sub Lists of specific sizes in Dart?

Photo by Markus Spiske on Unsplash

Creating an array of elements split into groups of a certain length, also known as “chunking,” is a common task in programming. In Dart, there are a few different ways to accomplish this task, and in this article, we will explore two approaches: one using a normal for loop and one using functional programming concepts.

You can play with both approaches on DartPad Here.

1. Collection Library

You can use slices method from collection library which splits a list into chunks and return an iterable of lists of the given size:

import 'package:collection/collection.dart';

List<dynamic> numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
Iterable<List<dynamic>> chunksCol = numbers.slices(3);
print(chunksCol); // ([1, 2, 3], [4, 5, 6], [7, 8, 9], [10])

2. Loop approach

Here’s an example of a function in Dart that takes an array and a size and splits the elements of the array into chunks of the given size:

List<List<dynamic>> chunk(List<dynamic> array, int size) {
  List<List<dynamic>> chunks = [];
  int i = 0;
  while (i < array.length) {
    int j = i + size;
    chunks.add(array.sublist(i, j > array.length ? array.length : j));
    i = j;
  }
  return chunks;
}

List<dynamic> myArray = [1, 2, 3, 4, 5, 6, 7, 8];
List<List<dynamic>> chunks = chunk(myArray, 3);
print(chunks); // [[1, 2, 3], [4, 5, 6], [7, 8]]

The while loop continues as long as i is less than the length of the original array. Inside the loop, we determine the end index j of the current chunk by adding size to the start index i. We then add a sublist of the original array to the chunks list, using the sublist() method and passing in the start and end indices. If the end index j is greater than the length of the original array, we set it to the length of the original array so that we don't go out of bounds. Finally, we update the start index i to be the end index j of the current chunk, and the loop continues until i is equal to the length of the array.

3. Functional Programming Approach

The generate function is a method of the List class, and it takes two arguments: the length of the list and a generator function. The generator function is called for each index in the list, and its return value is used to populate the element at that index. Here is an example of how to use the generate function to split an array into chunks of a certain length:

List<List<int>> chunkFp(List<int> arr, int size) {
  int chunks = (arr.length / size).ceil();
  return List.generate(
    chunks,
    (i) => arr.skip(i * size).take(size).toList()
  );
}

void main() {
  List<int> numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  List<List<int>> chunks = chunkFp(numbers, 3);
  print(chunks); // [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]]
}

In this example, we define a function called chunkFp() that takes an array of integers and a size as its arguments. The function uses the generate function to create a new list of chunks, where the number of chunks is calculated by dividing the length of the array by the desired size, and rounding up using the ceil() method. The generator function takes an index as its argument, and it uses the skip and take methods to create sublists of the desired length. Finally, it converts the Iterable to list and returned.

You liked this article? Subscribe to my mailing list to receive weekly tips and insights straight to your inbox 😉 And don’t forget to clap.