【Flutter】Stateless Widget・Stateful Widget違いを3分で解説!(サンプルコードあり)

FlutterでStateless Widget、Stateful Widgetがよく分からない

ということで悩んでませんか?
そこで、今回はFlutterのStateless WidgetStateful Widgetについてサンプルコードデモ動画で解説します。

この記事で分かること!
  • Stateless WidgetとStateful Widget違い

ちなみに、プログラミング初心者は疑問やエラーの解消に時間が掛かり、学習が前に進まなくて挫折することはよくあります。独学でFlutterを学習する場合は、次のことも考えないといけません。

  • 学習の計画
  • スケジュール管理
  • ポートフォリオ作成時に技術選定 など

初心者にとっては大変です。そこで、自走できるまでの手段にスクールを利用するのは1つの手です!Flutterが学べるおすすめスクールはこちらで詳しく解説してます。月2万ほど〜学べるスクールもあるのでご参考にどうぞ。

目次

Stateless Widgetとは

Stateless Widgetとは、状態(state)を持たないWidgetです。そのため、画面上の値を変更したくても、画面は再描画されません。

A widget that does not require mutable state.

(直訳)可変状態を必要としないウィジェット。

引用:Flutter公式サイト「Stateless Widget Class」

Stateless Widget のデモ動画

デモ動画の通りフローティングアクションボタンをクリックするとConsoleに数字が出力されます。乱数で0か1を出力する仕様です。コンソール上は数値は変わってますが、画面上のAPPBARでは数字は0のままとなり画面は再描画されません。

Stateless Widget のサンプルコード

Stateless Widgetのサンプルコードは以下の通りです。そのままコピペで使えます。

StatelessWidgetクラスを継承したState Demoクラスを作成します。継承することで、Stateless Widgetのメソッドやフィールドにアクセスできます。オーバーライドする事で、クラス継承時に親クラスのメソッドと同じ名前のメソッドを子クラスで定義し直し、親クラスのメソッドではなく子クラスのメソッドが呼ばれます。

import 'package:flutter/material.dart';
import 'dart:math';

void main() => runApp(StatelessDemo());

class StatelessDemo extends StatelessWidget {
  int chkNumber = 0;
  Random rdmNumber = new Random();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('数字は ' + (chkNumber == 1 ? '1' : '0')),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.numbers_rounded),
          onPressed: () {
            chkNumber = rdmNumber.nextInt(2);
            print(chkNumber);
          },
        ),
      ),
    );
  }
}

Stateless Widgetの主なメソッド

メソッド名内容
build method画面を描画する

Stateful Widgetとは

Stateful Widgetとは、状態(state)を持つWidgetです。そのため、画面上の値を変更したい場合に画面を再描画できます。

A widget that has mutable state.

引用:Flutter公式サイト「Stateful Widget Class」

Stateful Widget のデモ動画

デモ動画の通りフローティングアクションボタンをクリックするとConsoleに数字が出力されます。乱数で0か1を出力する仕様です。コンソール上は数値は変わり、画面上も数字は変わります。

ちなみにコンソールでは初期処理が出力されてます。これはinitStateのメソッドを利用しているため、初めの処理時のみ動くStateのメソッドになります。

Stateful Widget のサンプルコード

Stateful Widgetのサンプルコードは以下の通りです。コピペでそのまま動きます。

import 'package:flutter/material.dart';
import 'dart:math';

void main() => runApp(MyHomePage());

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _StatefulDemo();
}

class _StatefulDemo extends State<MyHomePage> {
  int chkNumber = 0;
  Random rdmNumber = new Random();

  @override
  void initState() {
    print("初期処理");
     super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('数字は ' + (chkNumber == 1 ? '1' : '0')),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.attach_money),
          onPressed: () {
            setState(() {
              chkNumber = rdmNumber.nextInt(2);
            });
            print(chkNumber);
          },
        ),
      ),
    );
  }
}
 

Stateful Widgetの主なメソッド

Stateful Widgetの主なメソッドは以下の通りです。

メソッド名内容
createState methodウィジェットツリー内の特定の場所で、変更可能な状態を作成します。
initState methodWidgetの初期化時に一度だけ呼ばれるメソッドです。
setState method指定した状態(State)を更新させる処理です。

まとめ:Stateless Widget・Stateful Widgetの違いは静的か動的

今回の記事では、Stateless WidgetとStateful Widgetについてサンプルコードとデモ動画解説しました。

ポイント!
  • Stateless Widgetは状態(state)を持たないWidgetです。
  • Stateful Widgetは状態(state)を持つWidgetです。


Flutterエンジニアになるには?

初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。

Flutterの学習方法を知る

Flutter を動画で学ぶ(Udemy)

Flutter をスクールで学ぶ

Flutterの仕事を探す

おまけFlutter入門の完全ガイド

Flutter/Dartの基礎一覧

Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。

Widget一覧

画面レイアウト

ボタン

入力・出力

ページ遷移

状態管理

非同期処理

Dartの基本文法

ライブラリ使い方

目次