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 optionalitemBuilder
. - 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!