【 Dart 】 List の中で if 文を使おう！【 Flutter 】

「条件によってを分岐させて中身が一部違うListを作りたいんだけど、いい方法ないかな？」

あります！

以前Listの定義文の中でfor文が使えることを紹介しましたが、実はif文も使用可能なんです！

本記事では、if 文による条件分岐を用いてListを定義する方法について紹介します。

Flutterでの使用例も併せて紹介します。

ぜひ読んでみてください！

List の定義文の中でif文を使う

とある変数の値に応じて、 Listの中の一部の値を含めるか含めないか条件分岐してListを定義したいとします。

例えば、このような例です。

const flag = false;

  List list;

  if (flag) {
    list = ['a', 'b', 'c'];
  } else {
    list = ['a', 'c'];
  }

  print(list); // [a, c]

今はListの要素が3個しか無いのでそんなに手間ではないように見えますが、５個だったり10個だったりして、変わる部分が1個だけだとすると、ちょっと冗長に見えますよね。

このコードが、Listの中のif文での条件分岐を用いることにより、以下のように書くことができます。

const flag = false;

  final list2 = [
    'a',
    if (flag) 'b',
    'c',
  ];

  print(list2); // [a, c]

Listの定義文の中でif文を使って'b'を含めるか含めないか条件分岐することができています。

このように、Listの定義文の中でif文は使用可能です。

また、以下のようにif-elseでの条件分岐も可能です。

const flag = false;

  final list3 = [
    'a',
    if (flag) 'b' else 'B',
    'c',
  ];

  print(list3); // [a, B, c]

さらに、三項演算子を用いた条件分岐も可能となっています。

const flag = false;

  final list4 = [
    'a',
    flag ? 'b' : 'B',
    'c',
  ];

  print(list4); // [a, B, c]

複数個条件分岐を含むことも可能です。

const flag = false;

  final list5 = [
    if (!flag) 'a',
    if (flag) 'b',
    if (!flag) 'c',
  ];

  print(list5); // [a, c]

以上、Listの中でのif文の使用の例でした。

Flutterでの使用例

Flutterでの使用例を解説します。

3の倍数だけ激しく主張する（カウントの後ろに'!!!!!!!!'がつく）カウンターアプリを作ってみます。

Rowのchildrenプロパティに配置するListにて、以下のようにif文を利用して書くことで、上のアプリが実現できます。

children: [
  Text('$counter'),
  if (counter % 3 == 0) const Text('!!!!!!!!')
],

サンプルコード全体は以下になります。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State createState() => _MyWidgetState();
}

class _MyWidgetState extends State {
  int counter = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('List if Sample'),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          setState(() {
            counter++;
          });
        },
      ),
      body: DefaultTextStyle(
        style: const TextStyle(
          fontSize: 30,
          color: Colors.black,
        ),
        child: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('$counter'),
              if (counter % 3 == 0) const Text('!!!!!!!!')
            ],
          ),
        ),
      ),
    );
  }
}