FlutterでRowやColumnを使ってウィジェットを動的に生成する方法

Flutterでは、ユーザーインタフェースのレイアウトを構築する際にRowやColumnなどのウィジェットを使って、水平方向や垂直方向に子ウィジェットを配置します。
コレクションなどで動的なコンテンツを扱う場合、プログラム的にこれらのウィジェットを生成する方法が必要です。この記事では、map()関数とforループを使用して、RowやColumnウィジェット内に動的にウィジェットを生成する方法を紹介します。

map()関数を使用する方法

map()関数はリストの各要素に対して指定した関数を実行し、新しいコレクションを生成します。この機能を利用して、リストの各要素からウィジェットを生成し、それをRowやColumnの子として追加することができます。

以下にサンプルコードを示します：

class MyWidget extends StatelessWidget {
  final List<String> items = ["Item 1", "Item 2", "Item 3"];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: items.map((item) {
        return Text(item);
      }).toList(),
    );
  }
}

この例では、文字列のリストitemsをmap()を使って、各文字列に対応するTextウィジェットに変換しています。そして、toList()でリストに変換してColumnのchildrenに渡しています。

forループを使用する方法

forループを使用する方法も非常に直感的です。ループを回しながらウィジェットリストを生成し、それをRowやColumnのchildrenに割り当てることができます。

class MyWidget extends StatelessWidget {
  final List<String> items = ["Item 1", "Item 2", "Item 3"];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        for (final item in items) Text(item),
      ],
    );
  }
}

このコードでは、itemsリストをforループで回し、各要素をTextウィジェットに変換してchildrenリストに追加しています。そして、そのchildrenリストをColumnのchildrenプロパティに設定しています。

まとめ

RowやColumnで動的にウィジェットを生成する方法は、map()関数やforループを使うことで容易に実装できます。