Column等のchildrenに特定の条件でだけ複数のWidgetを渡したい時に使えるテクニック

ある条件の時だけColumnに追加でWidgetを表示したい時がある

それが一つのWidgetの時は以下のようにすればいい

class SampleView extends StatelessWidget {
  const SampleView({super.key, required this.hoge});
  final String? hoge;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text('ガハハ'),
        // hogeがnon nullの時Textを表示する
        if (hoge != null) Text(hoge!),
      ],
    );
  }
}

例えば他のWidgetとの間にスペースを取りたい時どうすればいいか
Paddingを追加したり、SizedBoxとTextをまとめたWidetとして切り出すこともできるが、スプレッド演算子でも対応できる

class SampleView extends StatelessWidget {
  const SampleView({super.key, required this.hoge});
  final String? hoge;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text('ガハハ'),
        // hogeがnon nullの時Textを表示する
        if (hoge != null) ...[
          // hogeを表示する時だけSizedBoxも表示したい
          const SizedBox(
            height: 4,
          ),
          Text(hoge!),
        ],
      ],
    );
  }
}

これはSizedBoxとTextを持つListを作り、スプレッド演算子でそれを一気に追加している