【Flutter】StatelessWidgetとStatefulWidgetの違いについて

こんにちは。

今回は状態を持たないStatelessWidgetと状態を持つStatefulWidgetについて簡単にまとめたいと思います。これらは全てのWidgetの基本要素となり、使い分けが非常に重要になってくるのでこの機会に調べてみました。

この記事の内容

StatelessWidget
StatefulWidget
まとめ
参考

StatelessWidget

StatelessWidgetは状態を持たないウィジェットです。表示する内容が固定されており、ユーザーの操作やデータの変化によって再描画されないウィジェットに適しています。

以下のサンプルコードでは、HomeScreenクラスはStatelessWidgetを継承しています。buildメソッド内で、固定テキストである「Hello, Flutter!」を表示するだけのシンプルな内容です。ユーザーの操作による変更がなく、状態が変化しないため、StatelessWidgetが適しています。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'StatelessWidget Example',
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('StatelessWidget Example'),
      ),
      body: Center(
        child: const Text(
          'Hello, Flutter!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

StatefulWidget

StatefulWidgetは状態を持つウィジェットです。データや表示がユーザーの操作やイベントに応じて動的に変わる場合に使用します。StatefulWidgetは、createStateメソッドでStateクラスを生成し、このStateクラスが状態の変化を管理します。

以下のサンプルコードでは、CounterScreenクラスはStatefulWidgetを継承しています。_CounterScreenStateクラスがStateを管理し、カウンターの値を保存します。
_incrementCounterメソッドがボタン押下のたびに呼ばれ、setStateメソッドでカウンター値が更新されます。

setStateはFlutterに状態の変化を通知し、ウィジェットを再描画させるための重要なメソッドです。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'StatefulWidget Example',
      home: const CounterScreen(),
    );
  }
}

class CounterScreen extends StatefulWidget {
  const CounterScreen({super.key});

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

class _CounterScreenState extends State<CounterScreen> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++; // カウンターを1増加させる
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('StatefulWidget Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: const TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

まとめ

	StatelessWidget	StatefulWidget
状態の有無	状態を持たない	状態を持つ
再描画	初期状態のみ描画	状態が変化するたびに描画
使用例	固定表示のテキストやアイコン表示など	ボタンのクリックで変化するカウンターなど
代表的なメソッド	build	build, setState, createState, initState