StatelessWidgetとStatefulWidget

2024.10.04

StatelessWidget

その名前が示す通り、StatelessWidgetは不変である。ユーザーの操作に対して変化しないため、内部で状態を保持しない。この種のウィジェットは、親ウィジェットの変更にのみ反応する。
StatelessWidgetは次の特徴を持っている。

  1. イミュータブル（Immutable）: StatelessWidgetは一度作成されると、その内部の状態を変更することはできない。ウィジェットがビルドされると、その内容は変わらない。
  2. 再描画の制御: StatelessWidgetは自動的に再描画されず、親ウィジェットが再描画する必要がある場合にのみ再描画される。これは、データが変更されない限り、ウィジェットが不要に再描画されることを防ぐ。
  3. パフォーマンス向上: ウィジェットの状態が変わらないため、StatelessWidgetはパフォーマンスが向上し、軽量である。データの変更がない場合、再描画が不要なため、アプリケーションのパフォーマンスを向上させる。

基本的な記述方法は下記の通り。

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    // 以下、自由記載
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Stateless Widget Demo"),
        ),
        body: const Center(
          child: Text("Hello World"),
        ),
      ),
    );
  }
}

StatefulWidget

StatefulWidgetは、StatelessWidgetの逆である。つまり、ユーザーの操作に応じて動的に変化するUIを作成したい場合に使用する。例えば、ボタンをクリックするとアプリの背景色を変更したい場合、StatefulWidgetを利用する。

StatefulWidgetは次の特徴を持っている。

  1. ミュータブル（Mutable）: StatefulWidgetは状態を持ち、その状態は変更可能である。ユーザーの入力や外部のデータに応じて状態を変更し、UIを更新できる。
  2. 再描画のトリガー: 状態が変化すると、StatefulWidgetはそれを検出し、自動的に再描画をトリガーする。これにより、ユーザーの操作に応じてUIが変化する。
  3. 動的なUIの構築: Statefulウィジェットを使用することで、動的なUIを構築できる。例えば、フォームの入力値を受け取り、それに応じてリアルタイムでUIを更新することが可能。
  4. データの管理: Statefulウィジェットは状態を管理し、データの変更とUIの同期を取るのに役立つ。これは、アプリケーション内でのデータのフローを管理するのに役立つ。

StatefulWidgetは、StatelessWidgetを含むことができる。
基本的な記述方法は以下の通り。

import "package:flutter/material.dart";

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyStatefulWidgetState(),
    );
  }
}

///StatefullWidgetクラス
class MyStatefulWidgetState extends StatefulWidget {
  const MyStatefulWidgetState({Key? key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

///Stateクラス
class _MyStatefulWidgetState extends State<MyStatefulWidgetState> {
  int counter = 0;

  void _incrementCounter() {
    setState(() {
      counter += 1;
    });
}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Stateful Widget Example'),),
      body: Center(
        child: Text('counter: $counter'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: const Icon(Icons.add),
      ),
    );
  }
}

【参考】
https://stv-tech.co.jp/blog/statefulwidget%E3%81%A8statelesswidget%E3%81%AE%E9%81%95%E3%81%84

inserted by FC2 system