【Flutter入門】公式ドキュメントのチュートリアルをやってみる②【StatefulWidget編】

前回の記事の続きとなります。

今回は、こちらの公式ドキュメントのチュートリアルの内容を元に、StatefulWidget について確認して行きましょう。

【Flutter入門】公式ドキュメントのチュートリアルをやってみる②【StatefulWidget編】

先ずは、前回の記事で紹介したチュートリアルのソースコードに少し改変を加え、「お気に入りボタン」を例にStatefulWidget とはどう言ったものか確認して行きます。

修正する箇所は以下の部分です（全体のコードは前回の記事をご確認ください）。

・・・
Icon(
  Icons.star,
  color: Colors.red[500],
),
Text('41'),
・・・

上記の Icon は Stateless な（状態を保持しない）Widget です。

この Icon を Stateful な（状態を保持する） Widget に差し替えて、ボタンを押下する度に、状態（見た目）を変化させます。

Stateful な Widget を作成するには、StatefulWidget を継承した Widget と、その StatefulWidget の状態管理を受け持つ State<Widget> を継承したクラスを作成します。

以下は、Stateful な「お気に入りボタン」 FavoriteWidget のクラスです。

class FavoriteWidget extends StatefulWidget {
  @override
  _FavoriteWidgetState createState() => _FavoriteWidgetState();
}

お気に入りボタンの状態を管理するクラス _FavoriteWidgetState クラス（後述）を生成する createState メソッドを StatefulWidget クラスからオーバーライドしています。

FavoriteWidget を生成する際に自動的に呼ばれ _FavoriteWidgetState クラスが生成されます。

次に、_FavoriteWidgetState クラスのコードを確認します。

class _FavoriteWidgetState extends State<FavoriteWidget> {
  bool _isFavorited = true;
  int _favoriteCount = 41;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          padding: EdgeInsets.all(0),
          child: IconButton(
            icon: (_isFavorited ? Icon(Icons.star) : Icon(Icons.star_border)),
            color: Colors.red[500],
            onPressed: _toggleFavorite,
          ),
        ),
        SizedBox(
          width: 18,
          child: Container(
            child: Text('$_favoriteCount'),
          ),
        ),
      ],
    );
  }

  void _toggleFavorite() {
    setState(() {
      if (_isFavorited) {
        _favoriteCount -= 1;
        _isFavorited = false;
      } else {
        _favoriteCount += 1;
        _isFavorited = true;
      }
    });
  }
}

_isFavorited はお気に入りの ON/OFF を、_favoriteCount はお気に入りの総数を示しています。

_toggleFavorite() メソッド内で ON/OFF の処理が行われます。

@override Widget build(BuildContext context) {} のメソッドで、お気に入りボタンとそれに付随する Widget を生成しています。

注目ポイントは以下の２点です。

icon: (_isFavorited ? Icon(Icons.star) : Icon(Icons.star_border))

_isFavorited の true・false によって、Icons.star（★マーク）と Icons.star_border（☆マーク）が動的に切り替わります。

child: Text('$_favoriteCount')

そして、お気に入り総数を表示する上記にて、接頭辞に「$」を付加することによって、値の変化を監視することができ、動的に表示カウントを増減させることが出来ます。

従来の手続き型のプログラミングでは、このように、表示物と実際の値を紐付けることは Rx系のライブラリを使う以外には出来ず、表示される値と実際の値にズレが生じるバグが悩みの種でした。

予め、表示物（Widget）と状態（State）を紐づけておくことで、Widget の状態を意識せず、値の管理に集中できるという点がDart言語による開発の大きなメリットです。

以上