Flutterの基本: ステートフル ウィジェットの使い方

Flutterの開発において、ステートフルウィジェットの役割と使い方は重要です。本記事では、Flutterのステートフルウィジェットについて詳しく解説し、その利用方法や利点を探っていきます。

ステートレスウィジェットとの違い

まず、ステートレスウィジェットとステートフルウィジェットの違いについて説明します。ステートレスウィジェットは不変の設定情報を持ち、それに基づいて画面上の要素を描画します。これに対して、ステートフルウィジェットは変化する状態を持つことができます。この違いにより、アプリケーションのUIを動的に更新することが可能になります。

例えば、ステートレスウィジェットでは以下のように単純なテキスト表示を行いますが、これではテキストの内容を変更することはできません。

class MyStatelessWidget extends StatelessWidget {
  final String name;
  final int count;

  MyStatelessWidget(this.name, this.count);

  @override
  Widget build(BuildContext context) {
    return Text('$name: $count');
  }
}

しかし、ステートフルウィジェットを使用すると、テキストの内容を動的に変更することができます。

class MyStatefulWidget extends StatefulWidget {
  final String name;

  MyStatefulWidget(this.name);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('${widget.name}: $count'),
        ElevatedButton(
          onPressed: () {
            setState(() {
              count++;
            });
          },
          child: Text('Increment'),
        ),
      ],
    );
  }
}

この例では、ボタンを押すたびに`setState`メソッドが呼ばれ、カウントが増加し、UIが更新されます。

Stateのライフサイクル

ステートフルウィジェットのもう一つの利点は、Stateオブジェクトの長いライフサイクルです。ウィジェット自体が再構築されても、Stateオブジェクトはそのまま残り続けます。この特性により、ウィジェットの状態を持続させることができます。

例えば、アイテムカウンターのウィジェットが再構築されても、新しいウィジェットが同じタイプであれば、Stateオブジェクトはそのまま残り、再利用されます。

@override
void didUpdateWidget(MyStatefulWidget oldWidget) {
  super.didUpdateWidget(oldWidget);
  // ウィジェットが更新された際の処理
}

この方法を使うことで、アニメーションの開始など、ウィジェットの更新に応じた特定の動作を実行することができます。

なぜステートフルウィジェットをあまり作成しないのか

Flutterに慣れてくると、ステートフルウィジェットを作成する機会は減っていきます。その理由の一つは、よく使われるケースがすでにフレームワークに組み込まれていることです。例えば、データのストリームを監視し、それに応じてウィジェットを更新する`StreamBuilder`などが用意されています。

また、複雑な状態管理が必要な場合は、InheritedWidgetを使うことで、ツリーの上部にあるデータに簡単にアクセスできるようになります。

まとめ

ステートフルウィジェットを理解し、その適切な使い方を身につけることで、Flutterアプリの開発がより効率的になります。状態を持つウィジェットの管理方法を学び、Flutterの豊富なウィジェットを活用して、動的で魅力的なUIを構築しましょう。

出典: 元動画