Stateless・StatefullWidgetまとめ

StatelessWidget

Widgetの状態が変化しないインターフィースを作成する時に、クラスに継承させる。

StatefulWidget

ユーザーのインタラクションに依存して変化するユーザーインターフェースを作成する場合、
クラスに継承させる。
StatefulウィジェットはStateを継承したクラスの状態を追跡して、描画する。
ex.)ユーザの操作によって、画面の値が変わる。データベースの値を反映させる。

setState()

値を更新する時に使うメソッド。
データの更新や、ユーザーの操作等で値が変更されたかどうか監視する。
変更があった場合に、再描画のトリガーとなる。

気づき

• Stateless、Statefulが抽象クラスであること
  継承を暫定して作られたクラスであるため、buildメソッドの@overrideを強制させることが目的。正確にはbuildメソッドを持っているのは、StatelessクラスとStateクラス。Statefullは、stateの状態を反映している。

• なぜ、buildメソッドはWidgetの型で指定する必要があるのか。
  buildメソッドの前になぜ、「Widgt」をつけているか疑問だった。
  答えは単純。flutterは、WidgetでしかUIを構築できないため、Widget以外を受け付けないから。

main.dart

class _MainContainerState extends State<MainContainer> {
  int number = 1;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: TextButton(
      onPressed: () {
        setState(() {
          number = Random().nextInt(5) + 1;
        });
      },
      child: Text("$number")
    ));
  }
}

StateWidget深掘り

StateWidgetには、ライフサイクルというものが存在する。
ライフサイクルとは、StateWidgetの状態をみて、行いたい処理を定義するものである。
主に使われそうなもの、使われているものを紹介する。

• initState()　インスタンス化された時（Widgetの初期化）
• build（Buildcontext context）画面の描画時（Widgetの構築）
• setState() 画面の更新時（Widget再構築のトリガー）
• deactivate() 画面の遷移（Widgetの破棄）