[Flutter] StatelessとStatefulについて

Flutterのウィジェットには、StatelessウィジェットとStatefulウィジェットの2つの主要なタイプがあります。Statelessウィジェットは、そのプロパティが変更された場合に変化することがなく、1度描画されたら固定された状態が続くウィジェットです。一方、Statefulウィジェットは、そのプロパティが変更された場合に再描画されるウィジェットであり、ユーザーの入力や外部データなどに応じて動的に変化します。

Stateless ウィジット

Statelessって何？

Stateless Widgetは、一度作成されたらその内容を変更できない、状態を持たないウィジェットです。これは、ウィジェットのビルド時に設定された情報を表示するために使用されます。

Stateless Widgetは、ビルド時に渡されたデータに基づいて、ウィジェットツリー内のその場所に構築されます。Stateless Widgetは、ビルド中に変更されないため、パフォーマンスがよく、ビルドが高速であることが保証されます。また、ウィジェットの再ビルドが必要ない場合に使用すると、アプリケーションのレンダリングパフォーマンスが向上することがあります。

使い方

Statelessウィジェットを使用して、テキストを表示するウィジェットを作成する場合は、以下のようにコードを書くことができます。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "StatelessWidget TEST",
        home: Center(
          child: Text(
            'Hello, StatelessWidget TEST!',
            style: Theme.of(context).textTheme.bodyMedium,
          ),
        ));
  }
}

この例では、Stateless WidgetがHelloWorldクラスで宣言されています。buildメソッドは、ウィジェットの見た目を定義するために使用されます。この例では、Textウィジェットを使用してHello, World!を表示するために、中央に配置されたテキストを返します。また、TextStyleを使用して、文字のフォントサイズを設定しています。

Stateless Widgetは、ビルド時にデータが提供されるという点で強力です。これにより、動的なデータを含まないウィジェットを簡単に作成できます。しかし、状態を持たないため、ユーザーの入力や他のイベントに応じてウィジェットを更新する必要がある場合は、Stateful Widgetを使用する必要があります。

Stateful ウィジット

Statefulって何？

Stateful Widgetは、状態を持つウィジェットです。これは、ユーザーの入力や他のイベントに応じてウィジェットを更新する必要がある場合に使用されます。Stateful Widgetは、ビルド時に変更される可能性のあるデータを保持できます。

Stateful Widgetは、ウィジェット内で状態を保持するために、Stateオブジェクトと呼ばれるオブジェクトを使用します。Stateオブジェクトは、ウィジェットが作成されたときに一度だけ作成されます。Stateオブジェクトには、ウィジェットが保持する状態に関する情報が含まれています。この状態が変更された場合、StateオブジェクトはsetState()メソッドを呼び出すことで、ウィジェットを再描画します。

使い方

Statefulウィジェットを使用して、カウンターアプリを作成する場合は、以下のようにコードを書くことができます。

import 'package:flutter/material.dart';

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

class CounterApp extends StatefulWidget {
  const CounterApp({Key? key}) : super(key: key);

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

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    ));
  }
}

この例では、Stateful WidgetがCounterAppクラスで宣言されています。このウィジェットは、AppBar、Center、Column、Text、FloatingActionButtonなど、複数のウィジェットを組み合わせて構成されています。

Stateful Widgetには、Stateオブジェクトが必要です。この例では、_CounterAppStateクラスがStateオブジェクトを実装しています。このクラスには、カウンターの現在の値を保持するための変数_counterが含まれています。また、_incrementCounter()メソッドがあり、これはカウンターをインクリメントしてsetState()メソッドを呼び出して、ウィジェットを再描画します。

buildメソッドでは、Scaffold Widgetを使用してアプリケーションのレイアウトを構築しています。Columnウィジェットは、2つのTextウィジェットと1つのFloatingActionButtonウィジェットを含み、これらはすべてCenterウィジェットの中に配置されます。Textウィジェットは、ユーザーがボタンを何回押したかを表示するためのテキストを表示します。FloatingActionButtonウィジェットは、ボタンをクリックすることでインクリメント処理を呼び出します。

_incrementCounter()メソッドが呼び出されたとき、StateオブジェクトはsetState()メソッドを呼び出して、ウィジェットの状態を変更し、再描画します。これにより、Textウィジェットのテキストが更新され、ユーザーに新しいカウント値が表示されます。

状態を持つウィジェットを使用する場合、状態を変更するためのイベントが発生するたびに、ウィジェットを再描画する必要があります。Stateful Widgetは、状態を保持するために、Stateオブジェクトを使用します。Stateオブジェクトは、ウィジェットが作成されたときに一度だけ作成され、状態が変更されるたびにウィジェットを再描画するために使用されます。

Stateful Widgetの使用例は、アプリ内での状態管理が必要な場合に役立ちます。例えば、フォームの入力データ、ログイン状態、お気に入りのリスト、カウントダウンタイマーなど、ユーザーがアプリ内で状態を変更する必要がある場合に使用できます。

StatelessとStatefulの使い分け

Statelessウィジェットは、一度構築されたら変更できないため、状態を必要としない場合に使用することができます。例えば、アプリのロゴや静的なテキストを表示するために使用することができます。

一方、Statefulウィジェットは、ユーザーの入力や他のイベントに応じて変更が必要な場合に使用することができます。例えば、フォームの入力フィールドや、カウンターやタイマーなどのアプリ内の可変データを表示するために使用することができます。

まとめ

FlutterのStatelessウィジェットとStatefulウィジェットは、それぞれ異なる用途に使用することができます。Statelessウィジェットは、状態を持たない静的なウィジェットを作成するために使用することができます。Statefulウィジェットは、状態を持つ可変的なウィジェットを作成するために使用することができます。適切なウィジェットを選択することで、アプリのパフォーマンスを向上させることができます。