Skip to content

4 実践2 チェックボックス

Jump to bottom
Kenichiro Watanabe edited this page Jul 25, 2018 · 4 revisions

TODOアプリ実践② チェックボックス

チェックボックスを押したときの処理を追加する

  • 現状では、チェックボックスを押しても何も起きない
  • なぜなら、チェックボックスを押したときの挙動をまだ書いてないから！
    • チェックが入るだけとは限らないので、ちゃんと記述する必要がある
    • CheckBoxのonChangedプロパティに、押されたときの処理を記述する
      • 引数で渡ってきたのが、「押したことでチェック状態が変わった後の状態」が渡ってくる
  Checkbox(
    value: entries[index].isChecked,
    onChanged: (bool checked) {
      print(checked);
      entries[index].isChecked = checked;
    },
  ),

しかし、このコードではいくらタップしても変化がない。

何故！？！？

チェックボックスを押したことで、"再描画が必要"をシステムへ伝える

  • Flutterは、高速な描画を実現するために「不必要な箇所は再描画しない」設計になっている
    • これがFlutterの描画が特に高速な理由: 無駄な描画はしない
    • もし再描画してほしい場合は、setState()メソッドを呼んで、「再描画してほしい」旨をシステムへ伝える必要がある
  • Flutterは何度もbuild()メソッドを呼んで、前回build()を呼んだの戻り値と、今回build()を呼んだ時の戻り値を比較する
  • つまり、下記のようにsetState()で変化する値を渡してあげると、適切に再描画がされるようになる
  Checkbox(
    value: !entries[index].isChecked,
    onChanged: (bool checked) {
      print(checked);
      setState(() {
        entries[index].isChecked = !checked;
      });
    },
  ),

Tips

  • つまりbuild()メソッドは必要に応じて何度でも繰り返し呼ばれる可能性があるので、できるだけ軽い処理にするべき
  • build()でやらない処理、例えば画面を開いた時に1回しかやらない処理は、initState()など専用のメソッドをオーバーライドして使う
Clone this wiki locally