Flutterの基本（中編）

前編では、Flutterプロジェクトの作成、ディレクトリ構成、main.dartファイルについて学びました。中編では、FlutterのUI構築の基本となるウィジェットの概念と、ステートフルウィジェット、ステートレスウィジェットの違いについて詳しく見ていきます。

4. ウィジェットの概念

Flutterでは、UIを構築するための部品のことをウィジェット（Widget） と呼びます。ボタン、テキスト、画像、レイアウトなど、アプリを構成するすべての要素がウィジェットです。Flutterの大きな特徴は、すべてがウィジェットであるということです。

ウィジェットは、他のウィジェットを組み合わせて作ることができます。小さなウィジェットを組み合わせて、より大きなウィジェットを作り、それらをさらに組み合わせてアプリ全体のUIを構築します。このようなウィジェットの組み合わせのことをウィジェットツリーと呼びます。

ウィジェットには、主に2つの種類があります。

StatelessWidget（ステートレスウィジェット）
StatefulWidget（ステートフルウィジェット）

これらの違いについて、次のセクションで詳しく説明します。

5. ステートフルウィジェットとステートレスウィジェット

5.1 ステートレスウィジェット (StatelessWidget)

ステートレスウィジェットは、状態を持たないウィジェットです。一度作成されたら、その見た目やプロパティは変更されません。ステートレスウィジェットは、build メソッドを持ち、引数として渡された情報を使ってUIを構築します。

例えば、アイコン、固定のテキスト、画像などはステートレスウィジェットとして表現されます。

以下は、Text ウィジェットを使ったステートレスウィジェットの例です。

dart

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

  @override
  Widget build(BuildContext context) {
    return const Text('Hello, World!');
  }
}

MyStatelessWidget は、StatelessWidget を継承しています。build メソッド内で、Text ウィジェットを返しています。この Text ウィジェットは、常に 'Hello, World!' という文字列を表示します。

5.2 ステートフルウィジェット (StatefulWidget)

ステートフルウィジェットは、状態を持つことができるウィジェットです。ユーザーの操作やデータの変更などに応じて、動的に見た目を変更することができます。ステートフルウィジェットは、State オブジェクトと組み合わせて使用されます。State オブジェクトがウィジェットの状態を保持し、build メソッドを持ちます。

ステートフルウィジェットを作成するには、以下の2つのクラスを定義する必要があります。

StatefulWidget を継承したクラス
State を継承したクラス

以下は、カウンターアプリの例で見た MyHomePage ウィジェットを、ステートフルウィジェットとして書き直したものです。

dart

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

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

MyHomePage クラスは StatefulWidget を継承しています。createState メソッドで、_MyHomePageState オブジェクトを作成しています。

_MyHomePageState クラスは State を継承し、MyHomePage の状態を管理します。_counter 変数でカウンターの値を保持し、_incrementCounter メソッドでカウンターをインクリメントします。setState メソッドを呼び出すことで、Flutterに状態の変更を通知し、build メソッドが再実行されてUIが更新されます。

build メソッドでは、現在の _counter の値を使って Text ウィジェットを構築しています。

このように、ステートフルウィジェットでは、State オブジェクトを使って状態を管理し、動的にUIを変更することができます。