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

６｜画面の状態の変化

右下のボタンをタップで画面の状態を切り替えてみましょう。

まずbool型の変数isRowを定義します。
bool型というのはtrueかfalseの二つの値の型のことです。条件を表すのでif文の条件式に使います。

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  bool isRow = false;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

次にthreeSquareColumnを変更しましょう。
Widget型を返すメソッドthreeSquareColumnですが、現在戻り値はColumn(children: squares)になっています。ここをif文で分岐させてみましょう。
このように書けば、条件式がtrueならRow(children: squares)が返され、そうでないなら（falseなら）Column(children: squares)が返されます。

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

最後に、今までボタンを押された時に呼ばれていたメソッド_incrementCounterをonPressedに変更しましょう。
まずはメソッドonPressedを定義します。
状態を変えて画面を更新するときはsetStateの中で新しい値を入れる必要があります。
今回はsetStateの中で、「bool型の変数isRowに現在の値と逆にしたものを代入」しています。
（bool型の値に!をつけると逆になる。trueならfalseに、falseならtrueになる。）
つまり、このような書き方をすることで、onPressedメソッドが実行されるたびに、isRowの値がtrueとfalseで行ったり来たりする、ということです。

またonPressedメソッドではvoidという文字がついています。これは値を返してこない、処理だけのメソッドの型です。
今回のonPressedメソッドは、「なんの値も返さなくて（戻り値なし、処理だけ行う）、引数も要求しないメソッド」ということになります。

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void onPressed() {
    setState(() {
      isRow = !isRow;
    });
  }

では定義したonPressedメソッドを、ボタンがタップされた時に実行されるように、既存のメソッド_incrementCounterと書き換えます。

floatingActionButton: FloatingActionButton(
        onPressed: onPressed,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),

変更後: ボタンをタップでRowとColumnが切り替わるはずです👇