【Flutter】StatelessWidgetとStatefulWidgetの違いと使い方

【Flutter】StatelessWidgetとStatefulWidgetの違いと使い方

「StatelessWidgetとStatefulWidgetの違いがいまいち分からない」

「静的、動的ってどういうこと?」

このような疑問にお答えします。

結論

Flutterで使用されているWidgetは全て「StatelessWidget」または「StatefulWidget」のどちらかに分類されます。StatelessWidgetとは状態がずっと変化しないWidgetのことを呼び、StatefulWidgetとはユーザーによる操作(インタラクション)やデータを受け取った際などに状態が変化する可能性のあるWidgetのことを呼びます。

StatelessWidgetとStatefulWidgetの違いを一言で表すならアプリの起動中ずっと変化しないかどうかです。よって、アプリの起動中に変化する可能性がゼロのWidgetがStatelessWidgetで、状態が変化する可能性があるWidgetがStatefulWidgetです。

ティファ

StatelessWidgetとStatefulWidgetの大まかなイメージが理解できたと思うのでそれぞれのWidgetの特徴と使い方について紹介していくよ!

目次

StatelessWidgetの定義と仕組み

  • StatelessWidgetとは、状態がずっと変化しないWidgetのことを呼びます。
  • Icon, IconButton, TextなどがStatelessWidgetに含まれます。

StatelessWidgetの定義

StatelessWidgetを生成するには動画のように「stl」と書けば「stless」と予測コードが表示され生成できます。

ティファ

main関数またはクラスの外じゃないと生成できないよ!

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

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

StatelessWidgetの戻り値(return)には同じStatelessWidgetを使用してください。

ティファ

定義したStatelessWidgetは他のWidget同様に使用できるよ。使用するにはStatelessWidgetを生成したときに定義した名前で呼び出せるよ!

StatelessWidget の仕組み

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

StatelessWidgetが使用された際、StatelessWidgetのbuildメソッドが実行され、buildメソッドの戻り値を返します。

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

StatelessWidgetではbuildメソッドは一度しか実行されない

StatefulWidgetの定義と仕組み

  • StatefulWidgetとは、ユーザーによる操作(インタラクション)やデータを受け取った際などに状態が変化するWidgetのことを呼びます。
  • CheckBox, Slider, TextFieldなどがStatefulWidgetに含まれます。

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の戻り値(return)には「StatelessWidget」と「StatefulWidget」の両方を使用できます。

ティファ

定義したStatefulWidgetは他のWidget同様に使用できるよ。使用するにはStatefulWidgetを生成したときに定義した名前で呼び出せるよ!

StatefulWidgetの仕組み

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

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

プログラムでStatefulWidget が使用された際、StatefulWidgetのbuildメソッドが実行され、buildメソッドの戻り値を返します。(ここまではStatelessWidgetと同じ)

STEP

StatefulWidgetをユーザーが操作またはデータを更新(setStateメソッドを実行)すると、buildメソッドが再度実行されプログラムの変更をUIに反映させます。

StatefulWidgetではbuildメソッドを何度でも実行できる

ティファ

StatefulWidgetでbuildメソッドを再度実行するにはsetStateメソッドをStatefulWidgetで定義する必要があるよ!

setStateメソッドとは?

StatefulWidget3

setStateメソッドが実行されると、setStateメソッドのコールバック関数で定義したプログラムを実行してからStatefulWidgetを実行し直します。

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

setStateメソッドの定義

setState(
  () {
    (実行したい処理) //コールバック関数
  },
);
ティファ

下にあるサンプルコードを見ながらsetStateメソッドの理解を深めていこう!

setStateメソッドの理解を深める

FloatingActionButtonを押す度に画面中央に表示されている数字が1増加するプログラムのサンプルコードを使いながらsetStateメソッドの説明をしていきます。

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;
              },
            );
          },
        ),
      ),
    );
  }
}
STEP

ユーザーがFloatingActionButtonをクリックすると、onPressedプロパティのコールバック関数で定義したsetStateメソッドが実行されます。

STEP

setStateメソッドのコールバック関数で定義した「number += 1;」が実行された後で、buildメソッドでStatefulWidgetを再度実行しなおします。

STEP

buildメソッドによって更新されたプログラムがUIに反映されます。

ティファ

StatefulWidgetとsetStateメソッドは一緒に使われるので必ず使い方と仕組みを理解しておきましょう!

よかったらシェアしてね!
目次
閉じる