[Flutter][Tips][4] WidgetにはStatelessとStatefulの2種類ある

Widgetって何?って人は前回の記事『[Flutter][Tips][2] Widgetとは?』を参照して下さい。

 

State(=状態)とは?

アプリ全体で画面間でアプリケーションの状態を共有する必要がある場合があります。

アプリの状態が変わる(ユーザがボタンをタップする等)と、状態(state)が変わり、UIの再描画がトリガーされます。

[Flutter][Tips][1] Flutterが画期的な理由は◯◯型UIプログラミングである点』で、Flutterは宣言型UIプログラミングのフレームワークであるという話をしました。(ネタバレwww

宣言型の特徴は、コーディングする際、特定の状態(state)で、UIがどのように見えるかを書くだけで、他の状態についてイチイチ宣言したり定義したりする必要がない点です。

StatefulWidgetとStateが別々のオブジェクトである理由

Flutterでは、StatefulWidgetとState、2つのタイプのオブジェクトのライフサイクルが異なるからです。

Widgetは一時的なオブジェクトであり、現在の状態でアプリケーションのUIを作成するために使用されます。

一方、State(状態)オブジェクトはbuild()の呼び出し間で永続的であり、情報を記憶するために使用されます。

例:

class Counter extends StatefulWidget {
  // 状態(State)の構成
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State {
  int _counter = 0;

  void _increment() {
    // 状態(State)が変更されたことをFlutterに通知する。
    // 表示が更新された値を反映できるよう、buildが再実行される
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // setStateが呼び出されるたびに再実行される
    return Row(
      children: [
        RaisedButton(
          onPressed: _increment,
          child: Text('Increment'),
        ),
        Text('Count: $_counter'),
      ],
    );
  }
}

 

StatelessWidgetとStatefulWidgetの使い分け

公式では、「別にどっちでもいい」となってます(爆)

どっちで作っても動くものはできます。なので、最初は別にそんなに深く考え込まなくてもいいかも。私もよくわかんないけどテキトーにStatelessにしたりStatefulにしたりで実装してました。普通に動くものはできました。

 

ただ、推奨されている使い分けはあるので、その辺を紹介したいと思います。

使い分けのポイントは、そのWidgetが扱うデータが下記どちらの「状態」管理をすべきものか、ということ。

状態には二つあります。

一時的な状態(Ephemeral state)

一時的な状態というのは、単一のWidgetだけで使用したい状態のこと。

例は以下の通り。

  • PageViewの現在のページ
  • 複雑なアニメーションの現在の進行状況
  • BottomNavigationBarで現在選択されているタブ

一時的な状態は、StateとsetState()を使用して実装でき、多くの場合、単一のウィジェットに対してローカルです。

 

残りはアプリの状態です。

アプリの状態(App state)

アプリの多くの部分で共有したい状態、ユーザーセッション間で保持したい状態は、アプリケーション状態と呼ばれます(共有状態とも呼ばれる)。

例は以下の通り。

  • ユーザー設定
  • ログイン情報
  • ソーシャルネットワーキングアプリでの通知
  • eコマースアプリのショッピングカート
  • ニュースアプリでの記事の既読/未読状態

 

つまり、Statful Widgetは一時的な「状態」管理を要するWidget、StatelessWidgetはアプリ全体で共有したい「状態」を管理するWedgetに使うということ。らしい。

それでは!

末岐 碧衣
  • 末岐 碧衣
  • フリーランス のシステムエンジニア。独立後、一度も営業せずに月収 96 万円を達成。1986年大阪生まれ。早稲田大学理工学部卒。システムエンジニア歴 12年。
    2009年、ITコンサルティング企業に入社。3年目でコミュ障が爆発し人間関係が崩壊。うつにより休職するも、復帰後はコミュ障の自覚を持ち、「チームプレイ」を徹底的に避け、会社組織内においても「一人でできる仕事」に専念。社内外から評価を得た。
    無理に「チームプレイ」するよりも「一人でできる仕事」に専念した方が自分も周囲も幸せにできることを確信し、2015年フリーランスとして独立。

コメントする