【Flutter】StatefulWidgetを使う手順 - はなちるのマイノート

はじめに

今回はStatefulWidgetを使うときの実際の手順について書いていきたいと思います。

StatefulWidgetとは短くまとめると状態を持つウィジェットのことです。

これの使い方をライフサイクルを交えながら備忘録の意味合いのかねて書き残しておきます。

はじめに
StatefulWidgetクラスを継承したクラスの作成(必須)
プロパティを持たせる(任意)
Stateを継承したクラスを作成する(必須)
ライフサイクルを使う(任意)
さいごに

StatefulWidgetクラスを継承したクラスの作成(必須)

class FirstPage extends StatefulWidget{
  @override
  FirstPageState createState() => new FirstPageState();
}

プロパティを持たせる(任意)

StatefulWidgetクラスにプロパティ・コンストラクタを持たせたいときは以下のようにします。

class FirstPage extends StatefulWidget{
  // コンストラクタ
  FirstPage({Key key, this.message}) : super(key: key);

  // フィールド
  final String message;

  @override
  FirstPageState createState() => new FirstPageState();
}

Stateを継承したクラスを作成する(必須)

buildメソッドを実装しなければならないところと、setStateメソッドにより再描画できることが大切。

class FirstPageState extends State<FirstPage>{
  int _counter = 0;

  // これは必ず実装しなければならない
  @override
  Widget build(BuildContext context){
    return Center(
      child: GestureDetector(
        onTap: (){
          // 再描画する
          setState((){
            _counter++;
          });
        },
        child: Text('${widget.message}\n$_counter'),
      ),
    );
  }
}

ライフサイクルを使う(任意)

class FirstPageState extends State<FirstPage>{
  int _counter = 0;

  // エレメントをツリーに追加したときに呼ばれる
  @override
  void initState(){
    super.initState();
  }

  // initStateメソッドが呼ばれた直後
  @override
  void didChangeDependencies(){
    super.didChangeDependencies();
  }

  // これは必ず実装しなければならない
  @override
  Widget build(BuildContext context){
    return Center(
      child: GestureDetector(
        onTap: (){
          // 再描画する
          setState((){
            _counter++;
          });
        },
        child: Text('${widget.message}\n$_counter'),
      ),
    );
  }

  // リビルド時に呼ばれる
  @override
  void didUpdateWidget(FirstPage oldWidget){
    super.didUpdateWidget(oldWidget);
  }

  // ウィジェットが破棄されたときに呼ばれる
  @override
  void dispose(){
    super.dispose();
  }
}