【Flutter入門】StatefulWidgetはなぜ２つに分かれているのかについて解説するよ。

class MyHomePage extends StatefulWidget {
　// ➀親Widgetから受け取る変数の値が不変の場合、final変数として宣言する。
　// finalが宣言された変数はWidgetが作成される際（実行時）に値が適応され、それ以降値の変更は不可能となる。
  final String title;

　// ➁コンストラクター。クラス名({this.変数名})とすることで自動的に渡された親Widgetから渡された値を変数に設定する
  MyHomePage({Key key, this.title}) : super(key: key);

  // ➂ステートクラスをインスタンス化する。
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  void _incrementCounter() {
    // ➃変数の値を変更する際、setStateを必ず呼ぶ必要がある
    setState(() => _counter++);
  }

  // ➄描画するWidgetを返すbuild関数を定義する
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // ➅StatefulWidgetから受け取った値をState側で使う場合、widget.変数名を用いる
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('$_counter'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}