【Flutter】List に対して grid gap 的にspaceを指定するExtension

cssのgrid gapのようにspaceを指定したくなることは多々あるとおもいます。

以下のextensionを使うとそのように指定できるので便利です。

import 'package:flutter/material.dart';

extension ListSpaceBetweenExtension on List<Widget> {
  List<Widget> withSpaceBetween({double? width, double? height}) => [
        for (int i = 0; i < length; i++) ...[
          if (i > 0) SizedBox(width: width, height: height),
          this[i],
        ],
      ];
}

利用時はこういう形で利用できます。

class RowExample extends StatelessWidget {
  const RowExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Placeholder(),
        Placeholder(),
      ].withSpaceBetween(width: 8),
    );
  }
}

class ColumnExample extends StatelessWidget {
  const ColumnExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Placeholder(),
        Placeholder(),
      ].withSpaceBetween(height: 8),
    );
  }
}

Refs

https://stackoverflow.com/a/70993832