😺

【超初心者向け】Flutterのbuildメソッドについて

2025/03/12に公開

こんにちは、ワニかず@40歳 出戻りエンジニアです。
今回は、Flutterのコーディングをしていると幾度となく出てくる

build メソッドの役割について

以下のSimpleWidget というクラスを例にまとめてみました。
class SimpleWidget extends StatelessWidget {
  final String title;
  
  // コンストラクタ
  const SimpleWidget({Key? key, required this.title}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    // 最もシンプルな実装 - テキストを中央に表示
    return Center(
      child: Text(
        title,
        style: TextStyle(fontSize: 24),
      ),
    );
  }
}

 build の大まかな流れbuild メソッドは Flutter フレームワークから呼び出される
Center() というコンストラクタ関数を呼び出し、引数として:
title

style

など、アプリの設定を渡す
この Center ウィジェットが build メソッドの戻り値として Flutter フレームワークに返される（ Center ウィジェットが登録される、ようなイメージ）
Flutter フレームワークはこの戻り値を使って、実際の画面を描画
build メソッドは「このアプリはこういう構造とデザインで描画してください」という設計図を Flutter に提供している、といったイメージで、Flutter はその設計図に基づいて実際の UI を構築・描画します。
このような仕組みにより、Flutterは

「どのように描画するか」

ではなく

「何を描画するか」

を指定するスタイルとなっているのです。
このコードの主要な部分を分解して説明します：

 詳細の説明クラス宣言と継承：
class SimpleWidget extends StatelessWidget
ここでは SimpleWidget という名前のクラスを定義し、StatelessWidget を継承しています。StatelessWidget は状態を持たない（変化しない）UIコンポーネントを作成するためのベースクラスです。
プロパティ定義：
final String title;
このウィジェットは title という文字列プロパティを持っています。これはウィジェット内で表示するテキストを保持します。
また、final キーワードは、変数が一度初期化されたら、その後値を変更できないことを示します。
Dartでは、final がついた変数（この場合は title）は：
宣言時、またはコンストラクタ内で一度だけ値を設定できます
一度設定されると、その後値を変更することはできません
実行時に値が決まる定数として扱われます（実行時確定の不変値）
SimpleWidget の例では、final String title; と宣言することで：

title はウィジェットの作成時に設定され
その後は変更されず
ウィジェットの寿命を通じて同じ文字列を保持します
これはStatelesWidgetにとって特に重要で、「状態を持たない」というStatelessWidgetの性質に一致しています。プロパティが変更されない（不変）であることを保証することで、パフォーマンスの最適化やバグの防止に役立ちます。
コンストラクタ：
const SimpleWidget({Key? key, required this.title}) : super(key: key);
ここでのポイント：

const コンストラクタはパフォーマンス向上に役立ちます

Key? key はウィジェットのIDとして使用されるオプションパラメータ

required this.title は必須のパラメータで、初期化時に値を設定する必要があります

super(key: key) は親クラス(StatelessWidget)のコンストラクタに key を渡しています
build メソッドのオーバーライド：
@override
Widget build(BuildContext context) {
  // 最もシンプルな実装 - テキストを中央に表示
  return Center(
    child: Text(
      title,
      style: TextStyle(fontSize: 24),
    ),
  );
}
ここでの重要なポイント：

@override というアノテーションは、親クラスのメソッドを上書きすることを明示します

Widget build(BuildContext context) は StatelessWidget で定義された抽象メソッドで、ウィジェットの描画方法を定義します

BuildContext context パラメータはウィジェットツリー内での位置情報を含み、テーマや他のリソースにアクセスするために使用できます
メソッド内部では Center ウィジェットを返し、そのchildとして Text ウィジェットを配置しています

Text ウィジェットには、コンストラクタで渡された title を表示し、フォントサイズを24ポイントに設定しています
この SimpleWidget は以下のように使用できます：
// 使用例
SimpleWidget(title: 'こんにちは、Flutter')
これにより、「こんにちは、Flutter」というテキストが画面中央に24ポイントのサイズで表示されます。

【超初心者向け】Flutterのbuildメソッドについて

`build` の大まかな流れ

詳細の説明

Discussion