Zenn
👏

Flutter for文の中で条件分岐

に公開
Flutter
tech

初めに

正方形を3つ生成するというコードを例に、for文と条件分岐について記述します。
正方形には、0・１・２の番号を振っており、2の番号の正方形は文字色を赤にしてみます。

コード全体像

_rowChildrenという空の配列に、正方形を3回追加して行きます。

//空の配列
List<Widget> _rowChildren = [];

for(int i = 0; i < 3; i++){
_rowChildren.add(
  Expanded(
    child: AspectRatio(
      aspectRatio: 1.0,
      //条件分岐 i==2の時は ? 以下を実行 それ以外の時は : 以下を実行
      child: i == 2
	? Row(
	  children: [
	    Container(
	      child: Text(
		'${i}',
		style: TextStyle(fontSize: 24, color: Colors.red),
	      ),
	    ),
	  ],
	)
	: Row(
	children: [
	  Expanded(
	    child: Container(
	      child: Text(
		'${i}',
		style: TextStyle(fontSize: 24),
	      ),
	    ),
	  ),
	  VerticalDivider(width: 0.0,color: Colors.black,),
	],
      ),
    ),
  ),
);
}

for文

JavaScript等と全く同じ。
int i = 0ここのintの部分は型を指定して、変数定義をしている。
var i = 0等でも問題ない。

for(int i = 0; i < 3; i++){
  //ここに処理を記述
}

条件分岐

今回のコードの場合はchild:以下に条件を指定しており、
?以下に指定した条件に「当てはまる場合(trueの場合)に実行させたい処理」を記述する。
→今回の例の場合は、三個目の正方形の時だけ文字色を赤にする。

:以下に指定した条件に「当てはまらない場合(falseの場合)に実行させたい処理」を記述する。

child: i == 2 //条件の指定
  ?　　 //i == 2の時の処理を書く
  :  //i == 2以外の時の処理を書く

終わりに

Twitterでも情報発信しておりますので、ぜひフォローお願い致します!
https://mobile.twitter.com/tatsuki_kt

Discussion