【Flutter】StatefulWidgetの構造をやっと理解した

Flutterの状態管理を行うStatefulWidget（若しくはStatelessWidget）の中身について今更ながら理解しました。

やはり一行、1コードずつ丁寧に理解を進めていくことが大事ですね。

以下の例を使って進めて行きましょう。

class ClassName extends StatefulWidget {

  const ClassName({super.key});

  @override

  State<ClassName> createState() => _ClassNameState();

}

class _ClassNameState extends State<ClassName> {

  @override

  Widget build(BuildContext context) {

    return const Scaffold();

  }

}

・ClassNameクラスを実体化するコンストラクタ

  const ClassName({super.key});

自動的に呼び出される

super.keyはウィジェットをウィジェットツリー内で一意に識別するためのキー

・_ClassNameStateのオブジェクトを生成するメソッド

  State<ClassName> createState() => _ClassNameState();

State型のオブジェクトを返すcreateState()メソッド

()=>はメソッドの簡易化に用いられる：{return _ClassNameState()}を省略

・build()メソッド：画面を構築し描画するメソッド

  Widget build(BuildContext context) {

    return const Scaffold();

  }

オブジェクト生成時にこのbuild()メソッドが呼び出されて画面を構築・描画する

引数にBuildContext型のcontextを渡している：contextはウィジェットの位置と情報を保持

returnでウィジェット型のオブジェクトを返す

この中にウィジェットを積み重ねてアプリの画面を作っていく感じですね。

マルチプラットフォーム対応 最新フレームワーク Flutter 3入門