[Flutter] ウィジェット中でインライン条件文とインラインループ文を使う方法

概要

Flutterでアプリを開発する時、時々条件によってウィジェットを表示したり、ループを使ってウィジェットを表示する場合が発生します。

この時、該当部分を関数を作ったり別のウィジェットを作って表示させることもできますが、ウィジェット中でインライン条件文(Inline if statement)とインラインループ文(Inline for statement)を使うこともできます。

このブログポストではウィジェット中でインライン条件文とインラインループ文を使ってウィジェットを表示する方法について説明します。

インラインループ文

ウィジェット中でインラインループ文を使う方法について調べるため、main.dartファイルを次のように修正します。

const dataList = [
  {"id": 1, "title": "test 1"},
  {"id": 2, "title": "test 2"},
  {"id": 3, "title": "test 3"},
  {"id": 4, "title": "test 4"},
  {"id": 5, "title": "test 5"},
];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Condition and Loop'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          const Text('temp widget 1'),
          for (var data in dataList)
            Center(
              child: Text(
                data['title'] as String,
              ),
            ),
          const Text('temp widget 2'),
        ],
      ),
    );
  }
}

コードを詳しく見てみましょう。

const dataList = [
  {"id": 1, "title": "test 1"},
  {"id": 2, "title": "test 2"},
  {"id": 3, "title": "test 3"},
  {"id": 4, "title": "test 4"},
  {"id": 5, "title": "test 5"},
];
...

インラインループ文を使うため任意でデータリストを作りました。

...
body: Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    ...,
    for (var data in dataList)
      Center(
        child: Text(
          data['title'] as String,
        ),
      ),
    ...,
  ],
),
...

このように作ったデータリストをColumnウィジェットのchildren中でインラインループぶんを使ってTextウィジェットを画面に表示するようにしました。

Flutter conditaion and loop in widget - loop in column widget's children

このようにmain.dartを修正して実行してみると上のようにウィジェットがうまく表示されることが確認できます。

インライン条件文

ウィジェット中でインライン条件文を使う方法について調べるため、main.dartファイルを次のように修正します。

const dataList = [
  {"id": 1, "title": "test 1"},
  {"id": 2, "title": "test 2"},
  {"id": 3, "title": "test 3"},
  {"id": 4, "title": "test 4"},
  {"id": 5, "title": "test 5"},
];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Condition and Loop'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          const Text('temp widget 1'),
          for (var data in dataList)
            if (data['id'] as int != 2)
              Center(
                child: Text(
                  data['title'] as String,
                ),
              ),
          const Text('temp widget 2'),
        ],
      ),
    );
  }
}

コードを詳しくみてみましょう。

...
body: Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    ...,
    for (var data in dataList)
      if (data['id'] as int != 2)
        Center(
          child: Text(
            data['title'] as String,
          ),
        ),
    ...,
  ],
),
...