Flutter Cheat: Adding Separators in Row/Column/List Items

In Jetpack Compose, adding separators between list items is straightforward with the Arrangement.spacedBy method. However, Flutter doesn't provide a built-in way to achieve the same functionality. In this tutorial, I'll show you how to create a custom extension in Flutter to add separators between list items effortlessly.

Flutter’s Limitation: No Built-in Separator for Lists

In Jetpack Compose, you can use:

Column(
    verticalArrangement = Arrangement.spacedBy(12.dp)
) {
    // List items here
}

This code inserts a 12 dp space between each item in the list. Unfortunately, there’s no equivalent method in Flutter for Column, Row, or ListView widgets. So, we need to come up with a workaround.

Custom Extension to Insert Separators in Flutter

Let’s create a custom extension method on the List class to insert separators between items.

Step 1: Implement the insertSeparator Extension

This method will insert a specified separator between each item in the list. You can also use an optional itemBuilder function to transform items before inserting them into the list.

extension ListExtension<T> on List<T> {
  /// Inserts a [separator] between each element of the list.
  /// Optionally, you can provide an [itemBuilder] function to transform the
  /// element before inserting the separator.
  /// If [itemBuilder] is not provided, the element will be used as is.
  /// Example usage:
  /// [Widget, Widget, Widget].insertSeparator(
  ///   separator: Divider(),
  ///   itemBuilder: (widget) => Expanded(child: widget),
  /// )
  void insertSeparator({
    required T separator,
    T Function(T child)? itemBuilder,
  }) {
    final newList = expandIndexed(
      (index, element) => [
        if (index > 0) separator,
        itemBuilder?.call(element) ?? element,
      ],
    ).toList();
    clear();
    addAll(newList);
  }
}

Code Breakdown

• insertSeparator: This method takes a required separator and an optional itemBuilder.
• expandIndexed: Expands the list by inserting a separator between each element.
• itemBuilder: If provided, this function transforms each element before inserting the separator.
• clear() and addAll(): Clears the original list and replaces it with the newly constructed one.

Step 2: Using the Extension in a Flutter Widget

Let’s see how we can use this extension to add a separator between widgets in a Row:

Widget? _getRow(BuildContext context) {
  final widgets = <Widget>[
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.green),
    Container(width: 50, height: 50, color: Colors.blue),
  ];
  widgets.insertSeparator(
    separator: const SizedBox(width: 12), // Separator widget
    itemBuilder: (child) => Expanded(child: child), // Optional transformation
  );
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: widgets,
  );
}

Conclusion

By creating an extension method on the List class, we can easily add separators between widgets in Flutter, similar to how it's done in Jetpack Compose with Arrangement.spacedBy. This approach can be adapted for use in Row, Column, any other widget that takes a list of children, or simply to manipulate a list of other type.

Happy coding!