Flutter開発中に「MediaQuery.of() called with a context that does not contain a MediaQuery」というエラーに遭遇した経験はありませんか？このエラーは、適切なコンテキストなしで`MediaQuery.of()`を使用しようとした際に発生します。本記事では、このエラーの原因と解決方法について詳しく解説します。

エラーの原因

このエラーは主に以下の理由で発生します：

1. `MaterialApp`や`CupertinoApp`の外側で`MediaQuery.of()`を使用している

2. テストコード内で適切な`MediaQuery`を提供していない

3. ウィジェットツリーの上位に`MediaQuery`が存在しない

解決方法

1. MaterialAppの使用を確認

まず、アプリのルートウィジェットが`MaterialApp`または`CupertinoApp`であることを確認してください。これらのウィジェットは、アプリ全体に`MediaQuery`を提供します。

void main() {
  runApp(MaterialApp(
    home: MyHomePage(),
  ));
}

2. BuildContextの確認

`MediaQuery.of()`を使用する際は、適切な`BuildContext`を渡していることを確認してください。通常、`build`メソッド内の`context`を使用するのが安全です。

@override
Widget build(BuildContext context) {
  final mediaQuery = MediaQuery.of(context);
  // ...
}

3. テストコードの修正

テストコード内でこのエラーが発生する場合は、`MediaQuery`を明示的に提供する必要があります。

testWidgets('Widget test with MediaQuery', (WidgetTester tester) async {
  await tester.pumpWidget(
    MaterialApp(
      home: MediaQuery(
        data: MediaQueryData(),
        child: YourWidget(),
      ),
    ),
  );
  // テストコード
});

4. MediaQuery.of()の代替手段

直接`MediaQuery.of()`を使用できない場合は、以下の代替手段を検討してください：

  • `MediaQueryData.fromWindow(WidgetsBinding.instance.window)`を使用する
  • `MediaQuery.maybeOf(context)`を使用し、nullチェックを行う
  • カスタムウィジェットを作成し、その中で`MediaQuery`を提供する

まとめ

「MediaQuery.of() called with a context that does not contain a MediaQuery」エラーは、適切なコンテキストの使用や`MaterialApp`の配置を確認することで解決できます。テストコードでは明示的に`MediaQuery`を提供し、必要に応じて代替手段を検討することが重要です。

これらの解決策を適用することで、Flutterアプリケーションの開発をスムーズに進めることができるでしょう。エラーに遭遇した際は、まずウィジェットツリーの構造と`BuildContext`の使用方法を見直すことをおすすめします。