【Flutter】StatelessWidgetとStatefulWidgetの使い方|区別と仕組み

Stateless vs Stateful
Widgetは「StatelessWidget」もしくは「StatefulWidget」のどちらか一方に分類
  • StatelessWidgetとは、状態がずっと変化しないWidgetのことを呼び、Icon, IconButton, TextなどがStatelessWidgetに含まれます。
  • StatefulWidgetとは、ユーザーによる操作(インタラクション)やデータを受け取った際などに状態が変化するWidgetのことを呼び、CheckBox, Slider, TextFieldなどがStatefulWidgetに含まれます。
スポンサーリンク

StatelessWidget

StatelessWidget とは?

StatelessWidgetとは、状態がずっと変化しないWidgetのことを呼びます。

StatelessWidgetの定義

StatelessWidgetを生成するには動画のように「stl」と書けば「stless」と予測コードが表示され、生成できます。生成するには「main()」またはクラスの外で行ってください。

>> 【Flutter/Dart】main()とrunApp()とは?

class (名前) extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(); //戻り値を自分で定義(Containerがデフォルト)
  }
}

上のようなコードが自動的に生成されるので(名前)のところに好きなWidgetの名前をつけます。また、StatelessWidgetの戻り値がデフォルトでContainerになっているので、自分で好きな戻り値を定義します。

StatelessWidget の仕組み

class (名前) extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(); // 戻り値を自分で定義(Containerがデフォルト)
  }
}

StatelessWidgetが使用された際、StatelessWidgetのbuildメソッドを実行し、buildメソッドの戻り値を返します。よって、戻り値に実行したいコードを定義します。

また、StatelessWidgetではbuildメソッドが実行されるのは、StatelessWidgetがプログラムで使用された時の一度限りなので、StatefulWidgetを戻り値に使わないようにしましょう。

>> 【Flutter/Dart】関数の使い方|戻り値/キーワード引数/アロー関数

StatefulWidget

StatefulWidget とは?

StatefulWidgetとは、ユーザーによる操作(インタラクション)やデータを受け取る際に状態が変化するWidgetのことを呼びます。

StatefulWidgetの定義

StatefulWidgetの生成はStatelessWidget同様に行います。「stf」と書けば「stful」と予測コードが表示され、生成できます。

class (名前) extends StatefulWidget {
  @override
  _MyAppState createState() => _(名前自動)State();
}

class _(名前自動)State extends State<(名前自動)> {
  @override
  Widget build(BuildContext context) {
    return Container(); //戻り値を自分で定義(Containerがデフォルト)
  }
}

StatefulWidgetは2つのクラスで構成されています。(名前)のところに好きなWidgetの名前をつけると(名前自動)に自動的にWidgetの名前が代入されます。また、StatefulWidgetの戻り値がデフォルトでContainerになっているので、自分で好きな戻り値を定義します。

StatefulWidgetの仕組み

  1. プログラムでStatefulWidget が使用された際、StatefulWidgetのbuildメソッドを実行し、buildメソッドの戻り値を返します。(ここまではStatelessWidgetと同じ)
  2. StatefulWidgetをユーザーが操作またはデータを更新(setStateメソッドを実行)すると、buildメソッドを再度実行し、プログラムの変更をUIに反映させます。(StatefulWidgetではbuildメソッドが何度でも実行できる)
class (名前) extends StatefulWidget {
  @override
  _MyAppState createState() => _(名前自動)State();
}

class _(名前自動)State extends State<(名前自動)> {
  @override
  Widget build(BuildContext context) {
    return Container(); //戻り値を自分で定義(Containerがデフォルト)
  }
}

StatefulWidgetの上部クラスのcreateStateメソッドで下部クラス全体を戻り値としてUIに反映しています。また、StatefulWidgetでbuildメソッドを再度実行するにはsetStateメソッドを使います。

setStateメソッドとは?

ユーザーの操作によってsetStateメソッドが実行されると、まずsetStateメソッドのコールバック関数を実行し、次にbuildメソッドを再度実行してプログラムの変更をUIに反映させます。

>> 【Flutter/Dart】コールバック関数の使い方

setStateメソッドの定義

setState(
  () {
    (実行したい処理)
  },
);

setStateメソッドの引数にコールバック関数を代入します。

サンプルコード(StatefulWidget)

この動画は下のコードを実行したもので、ユーザーがFloatingActionButtonをクリックする度にスクリーンに映し出されている数字が1ずつ増えていくStatefulWidgetを実行したものです。

起きていること

  1. ユーザーがFloatingActionButtonをクリックすると、まずonPressedプロパティのVoidCallbackで定義したsetStateメソッドが実行されます。
  2. 次にsetStateメソッドのVoidCallbackで定義した「number += 1;」が実行され、buildメソッドを再度実行しなおします。この際、buildメソッドで使われている全ての「number」に1が追加されます。
  3. buildメソッドで更新されたプログラムがUIに反映されます。
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int number = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter App'),
        ),
        body: Center(
          child: Text(
            '$number',
            style: TextStyle(
              fontSize: 40,
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            setState(
              () {
                number += 1;
              },
            );
          },
        ),
      ),
    );
  }
}
タイトルとURLをコピーしました