Flutterアプリ開発講座　UI基礎編　その５

5｜if文とfor文の使い方

準備

まずはContainerの中にColumnを使って小さいContainerを三つ縦に並べましょう。

body: Center(
    child: Container(
      height: 300,
      width: 300,
      color: Colors.red,
      child: Column(
        children: [
          colorSquare(Colors.blue),
          colorSquare(Colors.yellow),
          colorSquare(Colors.blue),
        ],
      ),
    ),
  ),

そしてこのColumnを前章でやったようにメソッドにして返してみましょう。

Widget greenSquare() {
    return Container(height: 100, width: 100, color: Colors.green);
  }

  Widget blackSquare() {
    return Container(height: 100, width: 100, color: Colors.black);
  }

  Widget colorSquare(Color bgColor) {
    return Container(height: 100, width: 100, color: bgColor);
  }

  Widget threeSquareColumn () {
    return Column(
      children: [
        colorSquare(Colors.blue),
        colorSquare(Colors.yellow),
        colorSquare(Colors.blue),
      ],
    );
  }
}

body: Center(
    child: Container(
      height: 300,
      width: 300,
      color: Colors.red,
      child: threeSquareColumn()
    ),
  ),

変更後: 中身のロジックを変えただけなので表示は変わらないはずです👇

if文、for文とは？

if文を使えば１つの条件に対し、1つの処理を実行するか否かで処理を分岐させることができます。
for文を使えば、条件式で指定した条件回数を満たすまで処理を続ける、ループ処理を指示することができます。
実際の使い方を見ながら解説していきます。

for文とif文を使ってthreeSquareColumnの色を決める

まずはfor文の使い方を見ましょう。threeSquareColumnを以下のように書き換えます。
条件式int i = 1; i <= 3; i++は、「初期値1、最大値3、正の方向に増加」ということで、つまり i = 1, 2, 3 です。for文の{ }内の処理を、「 i = 1 の場合、i = 2 の場合、i = 3 の場合の三回繰り返してね」と読むことができます。
今回の場合、colorSquare(Colors.blue)が代入された変数squareが配列squaresにaddされる処理が三回繰り返されます。

※プログラミングでは右辺を左辺に代入です

Widget threeSquareColumn () {
    List<Widget> squares = [];
    for (int i = 1; i <= 3; i++) {
      var square = colorSquare(Colors.blue);
      squares.add(square);
    }
    return Column(
      children: squares,
    );
  }

変更後: 配列squaresには青い正方形が三つ入っていて、それをColumnに入れて縦並びにしているのでこのようになるはずです。

次はif文の使い方を見ましょう。
colorSquareを以下のように書き換えます。
今までは引数としてColor型を要求していましたが、int型を要求するように変更しています。
そして受け取ったint型の引数numの値によってif文で処理を分岐させて、色を分けています。
1が渡ってきた時→条件にないのでif文に入っていかない＝変数bgColorの中身はColors.blue
2が渡ってきた場合→条件num == 2に該当するので変数bgColorの中身はColors.yellow
3が渡ってきた場合→条件num == 3に該当するので変数bgColorの中身はColors.lime

Widget colorSquare(int num) {
    var bgColor = Colors.blue;
    if (num == 2) {
      bgColor = Colors.yellow;
    }else if (num == 3) {
      bgColor = Colors.lime;
    }
    return Container(height: 100, width: 100, color: bgColor);
  }

この変更によりこの文は、
「Widget型を返すメソッドcolorSquareを定義した。このメソッドはint型の引数を要求し、それをnumと呼ぶことにする。戻り値としてreturn以下を返す」
という意味に変わりました。

そしてthreeSquareColumnのエラーの出ている箇所をこのように書き換えます。
「colorSquareメソッドでint型の引数を要求するように定義を変更したにもかかわらず、変更前のColor型の引数を渡している」というエラーです。なのでint型のiを引数として渡してあげれば良いです。

Widget threeSquareColumn () {
    List<Widget> squares = [];
    for (int i = 1; i <= 3; i++) {
      var square = colorSquare(i);
      squares.add(square);
    }
    return Column(
      children: squares,
    );
  }

変更後: このようになっているはずです👇

ではcolorSquareの中にfor文から渡ってきた数字を表示させてみましょう。
numはint型なのでTextウィジェットで表示するためにはString型に変換してあげる必要があります。その処理がtoString()の部分です。

Widget colorSquare(int num) {
    var bgColor = Colors.blue;
    if (num == 2) {
      bgColor = Colors.yellow;
    } else if (num == 3) {
      bgColor = Colors.lime;
    }
    return Container(
      height: 100,
      width: 100,
      color: bgColor,
      child: Text(num.toString()),
    );
  }

変更後: 左上に数字が表示されるはずです👇

最後に数字を真ん中に持ってきてかつ大きくしてみましょう。
Containerの持つalignmentプロパティは子要素の配置を設定するプロパティです。ここをAlignment.centerにしてあげれば数字が各Containerの真ん中に表示されるはずです。
Textの持つstyleプロパティではフォントや文字の大きさを設定できます。

Widget colorSquare(int num) {
    var bgColor = Colors.blue;
    if (num == 2) {
      bgColor = Colors.yellow;
    } else if (num == 3) {
      bgColor = Colors.lime;
    }
    return Container(
      alignment: Alignment.center,
      height: 100,
      width: 100,
      color: bgColor,
      child: Text(
        num.toString(),
        style: TextStyle(fontSize: 30),
      ),
    );
  }

変更後: このようになっているはずです👇

一回では絶対理解できないので、時間を空けて何回もやって、少しずつ理解していけばよいです👌