Flutter Widgets — その概要、ウィジェットツリーとbuild

Flutter Widgetsとは？

Flutter Widgets — FlutterフレームワークにおけるすべてのUI要素で、不変（immutable）なDartクラスとして実装されています。ウィジェットはUI要素の構成です：サイズ、色、位置、イベントハンドラー。Android（XML + View）やiOS（Storyboard + UIView）とは異なり、Flutterはネイティブコンポーネントを使用せず、すべてがCanvas上のSkia（Android/iOS/Linux）またはImpeller（iOS/macOS）エンジンによって描画されます。これにより、プラットフォームによる差異なく、すべてのプラットフォームで一貫した外観が保証されます。Flutterには2つのウィジェットセットが付属しています：Material Widgets（Android/ウェブ向けGoogle Material Design 3）とCupertino Widgets（iOS/macOS向けApple HIG）。開発者は1つのアプリケーションで両方のセットを組み合わせることができます。各ウィジェットにはbuild()メソッドがあり、子ウィジェットまたはそれらの構成を返します — これがウィジェットツリーの構築方法です。

Flutterの3つのツリー

Flutterは3つのツリーで動作します：Widget Tree（開発者が作成する構成）、Element Tree（ツリー内のウィジェットの位置へのマッピング、フレームワークが管理）、Render Tree（レイアウトを計算しペイントを実行するオブジェクト）。WidgetはElementを作成し、ElementはRenderObjectを作成します。構成が変更された（リビルド）場合、Elementは再利用されます — これがFlutterの最適化メカニズムです：ウィジェットの型とkeyが一致する場合、Elementは再作成されず、新しい構成で更新されます。3つのツリーを理解することは、Flutterアプリケーションのパフォーマンス最適化の鍵です。

StatelessWidget：不変ウィジェット

StatelessWidget — 内部状態を保持しないウィジェットです。コンストラクターを介してパラメーターを受け取り、build後に変更する機能なしで表示します。StatelessWidgetは静的な要素に最適です：ヘッダー、アイコン、アバター、固定データのリスト。build()メソッドは作成時に1回、および親ウィジェットが変更されたときに呼び出されます。StatelessWidgetは状態を持たないため、個別のStateオブジェクトは不要です — build()はウィジェットクラスで直接定義されます。

import 'package:flutter/material.dart';

class ProfileHeader extends StatelessWidget {
  final String name;
  final String avatarUrl;

  const ProfileHeader({super.key, required this.name, required this.avatarUrl});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CircleAvatar(
          radius: 24,
          backgroundImage: NetworkImage(avatarUrl),
        ),
        const SizedBox(width: 12),
        Text(
          name,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }
}

ProfileHeader — コンストラクターを介してnameとavatarUrlを受け取るStatelessWidgetです。CircleAvatarがアバターを表示し、Textが名前を表示します。ウィジェットは作成後にこれらの値を変更できません。constコンストラクター（const ProfileHeader）を使用すると、親のリビルド中にFlutterがウィジェットインスタンスを再利用できます — すべてのStatelessWidgetに推奨されるマイクロ最適化です。

StatefulWidget：状態を持つウィジェット

StatefulWidget — 別のStateオブジェクトに格納された可変状態を持つウィジェットです。StatefulWidget自体はStatelessWidgetと同様に不変です。可変部分はStateに委譲されます：Stateは1回作成され、複数のウィジェットリビルド後も存続するオブジェクトです。状態が変更されると（setState()）、FlutterはStateのbuild()を呼び出し、UIを更新します。StatefulWidgetはインタラクティブな要素に使用されます：カウンター、テキストフィールド、チェックボックス、アニメーション、タイマー。

import 'package:flutter/material.dart';

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

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  bool liked = false;
  int count = 42;

  void _toggleLike() {
    setState(() {
      liked = !liked;
      count += liked ? 1 : -1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _toggleLike,
      child: Text(liked ? '♥ $count' : '♡ $count'),
    );
  }
}

LikeButton — Stateクラス_LikeButtonStateを持つStatefulWidgetです。フィールドlikedとcountはStateに格納された状態で、リビルド時にリセットされません。setState()はFlutterにUIの再構築が必要であることを通知します。Flutterは親のリビルドごとにStateを再作成しません — 構成（keyまたはウィジェット型）が変更された場合のみです。IT Sectrでは、表示にはStatelessWidget、インタラクティブコンポーネントにはStatefulWidgetを使用し、変更の境界までStatefulWidgetを最小化する原則に従っています。

ウィジェットツリー：WidgetからRenderObjectへ

Widget Tree — アプリケーションUIを記述するウィジェットの階層構造です。FlutterはWidget TreeをElement Treeに変換します：各WidgetはElementを作成し、Elementはツリー内の位置とRenderObjectとの接続を追跡します。Render Treeはレイアウト（サイズと位置の決定）とペイント（レンダリング）を実行します。Elementは重要な最適化レイヤーです：リビルド中にウィジェット型とkeyが変更されていない場合、Elementは再利用され、RenderObjectを再作成せずに構成を更新します。これにより、Flutterの高いフレームレート（60/120 FPS）でのパフォーマンスが保証されます。

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutterウィジェット')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.flutter_dash, size: 80),
            const SizedBox(height: 16),
            const Text(
              'こんにちは、Flutter!',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

HomeScreenウィジェットツリー：Scaffold → AppBar + Center → Column → [Icon, SizedBox, Text]。ScaffoldはルートのMaterial Designレイアウトウィジェットです。Centerは子のColumnを中央揃えにします。Columnは子を中央揃え（mainAxisAlignment.center）で垂直に配置します。Flutterはレイアウトを上から下（制約は親から渡される）、サイズを下から上（sizedByParentまたは子からのサイジング）に計算します。

BuildContext：ビルドコンテキストとツリーへのアクセス

BuildContext — Element Tree内のウィジェットの位置の記述子です。各build()メソッドはBuildContextを受け取り、ウィジェットはそれを通じて以下にアクセスできます：MediaQuery（画面サイズ、向き、ピクセル密度、セーフエリア）、Theme（MaterialThemeDataまたはCupertinoThemeData）、Navigator（ナビゲーションスタック）、ScaffoldMessenger（SnackBar）、InheritedWidget（ツリーを下ってデータを渡す）。BuildContextはbuild()完了後に保存したり、同期的コンテキスト外で使用したりしてはいけません — これにより“Scaffold.of() called with a context that does not contain a Scaffold”などのエラーが発生します。contextを保存する代わりに、データアクセスにはBuilderウィジェットまたはInheritedWidgetパターンを使用してください。

Key：ツリー内のウィジェット識別

Key — 各ウィジェットのコンストラクターのオプションパラメーター（super.key）です。Keyは、リスト内のアイテムの順序や数が変更されたときに、Flutterがウィジェットを識別するのに役立ちます。Keyがない場合、Flutterはウィジェットを型と位置で比較します。Keyなしでリストの途中にアイテムを追加すると、Flutterは誤ったウィジェットにElementを再利用し、状態のバグ（StatefulWidget）やアニメーションの問題を引き起こします。リストにはValueKey（一意の識別子）、ObjectKey（データオブジェクトに基づく）、UniqueKey（リビルドごとに一意が保証される — 強制再作成用）を使用してください。

Flutterウィジェットカタログ：Material、Cupertino、Layout

Flutter SDK（安定版3.3+、Dart 3+）には200以上の組み込みウィジェットがカテゴリに分かれて含まれています：Layout（Row、Column、Stack、Container、Expanded、Flexible、Wrap、GridView、ListView、CustomScrollView）、Material Design（Scaffold、AppBar、Card、Drawer、BottomNavigationBar、FloatingActionButton、TabBar、Chip、DataTable）、Cupertino（CupertinoPageScaffold、CupertinoNavigationBar、CupertinoButton、CupertinoTabBar）、Painting & Effects（Opacity、DecoratedBox、ClipRect、Transform、BackdropFilter、ShaderMask）、Async（FutureBuilder、StreamBuilder）、Accessibility（Semantics、MergeSemantics、ExcludeSemantics）。レイアウトウィジェットはあらゆるFlutter UIの基盤です：Rowは水平方向の並び、Columnは垂直方向、Stackは重なり合う要素、ContainerとBoxDecorationは装飾用です。