[Flutter]MediaQueryを使い画面サイズを取得したいのですが、エラーが出てしまします。

Question

前提

MediaQueryを用いて画面サイズを取得したくて以下のサイトを参考にしたいのですが、
final double deviceHeight = MediaQuery.of(context).size.height;
の部分でエラーが起きます。
ネットで調べたのですが、解決しなかったのでここで質問させていただきます。
皆様お忙しとは思いますが、どなたかアドバイスをいただけないでしょうか。

＜参考にさせていただいたサイト＞
https://qiita.com/najeira/items/c98c5fec9c71104f8263
https://note.com/hatchoutschool/n/n223ba8f1f3d7

発生している問題・エラーメッセージ

No MediaQuery widget ancestor found.

該当のソースコード

import 'package:ex_diary/new_account.dart';
import 'package:ex_diary/privacy_policy.dart';
import 'package:ex_diary/terms_of_use.dart';
import 'package:flutter/material.dart';
import 'login.dart';

void main() async {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key});
  @override
  State<MyApp> createState() => LoginTransit();
}

class LoginTransit extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    final double deviceHeight = MediaQuery.of(context).size.height;
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            children: <Widget>[
              SizedBox(
                height: deviceHeight * 0.2,
              ),
              Container(
                alignment: Alignment.center,
                child: Text('タイトル'),
              ),
              SizedBox(
                height: 120,
              ),
              Container(
                child: TextButton(
                  child: Text("メールアドレスではじめる"),
                  onPressed: () {
                    // ログイン画面へ
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => NewAccount()));
                  },
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Container(
                child: TextButton(
                  child: Text("すでにアカウントをお持ちの方"),
                  onPressed: () {
                    // ログイン画面へ
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => login()));
                  },
                ),
              ),
              SizedBox(
                height: 150,
              ),
              Container(
                child: TextButton(
                  child: Text("利用規約"),
                  onPressed: () {
                    // 利用規約画面へ
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => TermsOfUse()));
                  },
                ),
              ),
              Container(
                child: TextButton(
                  child: Text("プライバシーポリシー"),
                  onPressed: () {
                    // プライバシーポリシー画面へ
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => PrivacyPolicy()));
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

試したこと

・MaterialAppが足りない（？）ということなので、runAppのところを以下のように変更しましたが変わらなかったです。

  runApp(
  new MaterialApp(
    MyApp(),
  ));

・以下のサイトではBuilderウィジェットで包めばいいということでしたが、包み方がわかりませんでした。。。
https://zenn.dev/masamasasa/articles/cf7b4265cf4a9c

補足情報（FW/ツールのバージョンなど）

[✓] Flutter (Channel stable, 3.3.8, on macOS 13.0.1 22A400 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.73.0)

Answer 1

一応runAppの箇所を下記のようにするだけで動きました。

runApp(MaterialApp(home: MyApp(),),);

しかしそれだけだと一つのアプリにMaterialAppが二つあることになりますね。
多分そういう使い方を想定していないと思いますので、LoginTransit内のMaterialAppは削除すべきだと思います。

お示しの通り、Builderウィジェットでラップしてもできます。
それも含めてなぜそれらで解決できるのか、ということになるとBuildContextやInheritedWidgetの知識が必要になります。
それらの定義箇所のソースコード、ドキュメントコメントを読めば良いのですが、どちらも難易度が少し高くなるので、まずはProviderパッケージの使い方から始めてぼちぼち基礎知識を増やして行くのが良いような気がします。

Comments

[bbiiq]

とても丁寧な回答ありがとうございます。
Providerについて勉強してみます。
ありがとうございました。