【Flutter】StatelessとStatefulの違い

Flutter

2022.06.02

今回はFlutterにおけるStatelessとStatefulの違いについて説明します。

Stateとは
Statelessとは
Statefulとは

Stateとは

Stateとは「状態」や「状況」という意味になります。変数の値、端末内に保存しているデータやAPIで取得したデータ、入力フォーム等のUIの状態な入力内容、端末の状態などがこれにあたります。

Statelessとは

Stateless widgetは上記のようなStateの状態を持たない静的なWidgetのことです。Widget内で使用する変数は親Widgetから渡された値を使用することしかできず、値の変更はできません。

子StatelessWidgetへ渡した変数を親Widget内で変更した場合、子StatelessWidgetは再描画されます。

Stateless Widgetを継承しているものとしては、Icon、Textなどがあります。

サンプルコード

class SampleStatelessWidget extends StatelessWidget {
  var text = 'Hello World!';

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(text),
    );
  }
}

Statefulとは

StatefulWidgetはStatelessWidgetと違い、Stateの変更を持つ動的なWidgetです。自分の変数を変更することで自身を再ビルドすることができ、表示内容を動的に変更できます。

例えばCheckboxやTextFieldなどが該当します。

サンプルコード

class SampleStatefulWidget extends StatefulWidget {
  @override
  _SampleStatefulWidgetState createState() => _SampleStatefulWidgetState();
}

// 状態を表すクラス
class _SampleStatefulWidgetState extends State<SampleStatefulWidget> {
　var text = "Hello World!"

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(text),
    );
  }

  // 何かしらでこの処理を呼ぶとテキストが引数に渡したものに変わる
  void setText(String newText) {
    setState(() {
      text = newText;
    });
  }
}

ざっくりですがこんな感じの違いがあります。