Flutter Widgetの表示を制御する方法(if文、for文)

はじめに

開発をしていると、ColumnやTextなどのWidgetを繰り返し表示したい時や、ある条件に当てはまった時のみWidgetを表示したい時があるかと思います。

私はあるタスクを任されて実装を行っていた時、画面にWidgetを繰り返し表示する必要が出て来ました。Flutterでもfor文が使えるという事で、そこで試しに以下のように記述(例)してみた所、エラーが発生してしまいました。

sample.dart(エラー)

Column(
    children: [
        for(final str in strList) {
            Row(
                children: [
                    SampleWidget1(),
                    SampleWidget2(),
                ],
            ), // Row
            Text('ああああ'),
        }
    ],
), // Column

Column列の中にRowとTextを繰り返し表示するというようなことがやりたかったのですが、この書き方では無理だったようです。

因みに、for(if)文の{}を省略して処理のWidget表示を1つだけ書く事は出来ました。

sample2.dart

Column(
    children: [
        for(final str in strList) 
            Row(
                children: [
                    SampleWidget1(),
                    SampleWidget2(),
                ],
            ), // Row
    ],
), // Column

解決策

ただ、｛｝を使って複数個のWidgetを表示したい！と思ったが調べても方法が見つからず、先輩に相談したところ、｛｝の前に...(ピリオド3つ)を付けることで実現する事が出来ました。

sample3.dart

Column(
    children: [
        for(final str in strList) ... { // ここ
            Row(
                children: [
                    SampleWidget1(),
                    SampleWidget2(),
                ],
            ), // Row
            Text('ああああ'),
        }
    ],
), // Column

これでRowとTextを繰り返しColumnに表示する事が出来ました。めでたしめでたし。