質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

解決済

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

bbiiq
bbiiq

総合スコア32

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

1回答

0グッド

0クリップ

181閲覧

投稿2022/11/13 10:10

前提

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.

該当のソースコード

Dart

1import 'package:ex_diary/new_account.dart'; 2import 'package:ex_diary/privacy_policy.dart'; 3import 'package:ex_diary/terms_of_use.dart'; 4import 'package:flutter/material.dart'; 5import 'login.dart'; 6 7void main() async { 8 runApp( 9 MyApp(), 10 ); 11} 12 13class MyApp extends StatefulWidget { 14 const MyApp({Key? key}); 15 16 State<MyApp> createState() => LoginTransit(); 17} 18 19class LoginTransit extends State<MyApp> { 20 21 Widget build(BuildContext context) { 22 final double deviceHeight = MediaQuery.of(context).size.height; 23 return MaterialApp( 24 home: Scaffold( 25 body: Center( 26 child: Column( 27 children: <Widget>[ 28 SizedBox( 29 height: deviceHeight * 0.2, 30 ), 31 Container( 32 alignment: Alignment.center, 33 child: Text('タイトル'), 34 ), 35 SizedBox( 36 height: 120, 37 ), 38 Container( 39 child: TextButton( 40 child: Text("メールアドレスではじめる"), 41 onPressed: () { 42 // ログイン画面へ 43 Navigator.push(context, 44 MaterialPageRoute(builder: (context) => NewAccount())); 45 }, 46 ), 47 ), 48 SizedBox( 49 height: 20, 50 ), 51 Container( 52 child: TextButton( 53 child: Text("すでにアカウントをお持ちの方"), 54 onPressed: () { 55 // ログイン画面へ 56 Navigator.push(context, 57 MaterialPageRoute(builder: (context) => login())); 58 }, 59 ), 60 ), 61 SizedBox( 62 height: 150, 63 ), 64 Container( 65 child: TextButton( 66 child: Text("利用規約"), 67 onPressed: () { 68 // 利用規約画面へ 69 Navigator.push(context, 70 MaterialPageRoute(builder: (context) => TermsOfUse())); 71 }, 72 ), 73 ), 74 Container( 75 child: TextButton( 76 child: Text("プライバシーポリシー"), 77 onPressed: () { 78 // プライバシーポリシー画面へ 79 Navigator.push( 80 context, 81 MaterialPageRoute( 82 builder: (context) => PrivacyPolicy())); 83 }, 84 ), 85 ), 86 ], 87 ), 88 ), 89 ), 90 ); 91 } 92} 93

試したこと

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

Dart

1 runApp( 2 new MaterialApp( 3 MyApp(), 4 ));

・以下のサイトでは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)

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

1

ベストアンサー

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

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

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

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

投稿2022/11/13 11:59

moriman

総合スコア510

bbiiq😄を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

bbiiq

2022/11/13 12:44

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

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。