🍳 AI x Flutter Cookbook

重要概念#2-5: BuildContextとは何か？ - ウィジェットの「現在地」

Flutterのコードを書いていると、buildメソッドの引数や、Navigator.of(context)のような静的メソッドの呼び出しで、必ずBuildContextというものに遭遇します。

BuildContextは、目に見えるウィジェットとは異なり、非常に抽象的な概念のため、多くの初心者が「これは一体何者で、なぜ必要なのか？」と混乱します。

このドキュメントでは、BuildContextの正体を「巨大なショッピングモールにおける、あなたの現在地情報」に例えて、その重要な役割を解き明かしていきます。

1. BuildContextとは「ウィジェットツリーにおける、そのウィジェットの場所」

思い出してください。FlutterのUIは、ウィジェットツリーという巨大な階層構造で成り立っています。

MaterialApp
└── Scaffold
    └── Column
        ├── Text
        └── ElevatedButton

BuildContextとは、このツリー構造の中における、各ウィジェットの「現在地」や「住所」を指し示す情報なのです。

すべてのウィジェットのbuildメソッドは、引数としてBuildContext contextを受け取ります。これは、Flutterフレームワークが「あなた（このウィジェット）は今、ツリーのこの場所にいますよ」と、そのウィジェット自身の場所情報を渡してくれているのです。

2. なぜ「現在地」が必要なのか？ - ショッピングモールの例

あなたは、巨大なショッピングモールの2階にある、スターバックスの前に立っているとします。この「2階のスタバ前」という情報が、あなたのBuildContextです。

この「現在地情報」があると、何が便利でしょうか？

3. BuildContextの具体的な使い方

BuildContextは、主に.of()という静的メソッドを通じて、親ウィジェットが提供する機能にアクセスするために使われます。

例1：ScaffoldMessenger.of(context) - 最寄りのScaffoldMessengerを探す

スナックバー（画面下部に一時的に表示されるメッセージ）を表示するには、まず現在のウィジェットツリーの中からScaffoldウィジェットを見つける必要があります。

// ボタンが押された時
ElevatedButton(
  onPressed: () {
    // context（現在地）を渡して、「この場所から一番近いScaffoldさんを探してください」と依頼する
    final scaffold = ScaffoldMessenger.of(context);

    // 見つけたScaffoldさんに、スナックバーの表示をお願いする
    scaffold.showSnackBar(
      const SnackBar(content: Text('こんにちは！')),
    );
  },
  child: const Text('メッセージ表示'),
)

もし、このウィジェットの親にScaffoldが存在しなければ、.of(context)はエラーを返します。「このフロアにはトイレはありません」と言われるのと同じです。

例2：Theme.of(context) - アプリのテーマカラーを取得する

アプリ全体のテーマ（基調色など）を取得する場合も同様です。

// Textウィジェットの色を、アプリのテーマで定義されたプライマリーカラーにする
Text(
  'テーマカラーのテキスト',
  style: TextStyle(
    // context（現在地）を渡して、「このアプリのテーマ設定を持ってきてください」と依頼する
    color: Theme.of(context).primaryColor,
  ),
)

4. よくあるエラー：「Navigator.of() called with a context that does not contain a Navigator」

このエラーは、初心者が最も遭遇するエラーの一つです。

エラーの意味: 「Navigatorを探しに行ったけど、あなた（context）の親には誰もいませんでしたよ」

原因: MaterialAppウィジェットを作成している同じbuildメソッドの中で、そのcontextを使ってNavigator.of(context)を呼び出そうとしていることがほとんどです。

// ダメな例
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // このcontextは、MaterialAppよりも「上」にいる
    return MaterialApp(
      home: ElevatedButton(
        onPressed: () {
          // MaterialAppはまだ作られている途中なので、
          // このcontextからNavigatorは見つけられない！
          Navigator.of(context).push(...); // ここでエラー
        },
        child: Text('エラーになるボタン'),
      ),
    );
  }
}

解決策: MaterialAppの子ウィジェット（別のStateless/StatefulWidget）の中からNavigatorを呼び出すように、ウィジェットを分割します。

// 良い例
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(), // 別のウィジェットを呼び出す
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // このcontextは、MaterialAppの「下」にいる
    return ElevatedButton(
      onPressed: () {
        // このcontextからは、親にいるMaterialAppのNavigatorが見つけられる！
        Navigator.of(context).push(...); // 正常に動作
      },
      child: Text('遷移するボタン'),
    );
  }
}

BuildContextは、ウィジェットツリーという階層構造を理解するための鍵です。「contextは、ウィジェットツリーを遡って親を探すための道具」と覚えておけば、多くの場面でその役割を直感的に理解できるようになるでしょう。