【Flutter/Dart】画面サイズを取得する方法！MediaQueryの使い方

この記事からわかること

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

環境

Flutterで画面サイズを取得する

Flutterで画面サイズを取得するにはMediaQueryを使用します。ofでコンテキストをセットしたあとsize.widthで画面の横幅をsize.heightで画面の高さを取得できます。

double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;

これを使用することでUI要素をレスポンシブな(端末サイズに柔軟に対応した)サイズで指定することが可能になります。

MediaQueryは画面サイズやデバイスの向き、ダークモード/ライトモード、アクセシビリティ設定を取得できるWidgetです。of(context)でBuildContextからツリーの上位にあるMediaQueryを取得しています。

MediaQueryを取得する際は上位にWidgetsAppかMaterialAppが存在している必要があるので注意してください。

プロパティ	型	説明
size	Size	画面の幅(size.width)と高さ(size.height)
orientation	Orientation	デバイスの向き(Orientation.portrait or Orientation.landscape)。
devicePixelRatio	double	画面のピクセル密度(1インチあたりのピクセル数)
textScaleFactor	double	ユーザーが設定したフォントのスケール倍率(1.0 が標準)
padding	EdgeInsets	画面の安全領域(ノッチやステータスバーを避けるための余白)
viewInsets	EdgeInsets	ソフトウェアキーボードやシステムUIによって隠れる領域のサイズ
viewPadding	EdgeInsets	画面の物理的な余白(padding と違い、viewInsets の影響を受けない)
alwaysUse24HourFormat	bool	デバイスの時間表示が24時間表記かどうか
platformBrightness	Brightness	現在のテーマ(Brightness.light or Brightness.dark)
boldText	bool	アクセシビリティ「太字を使用する」設定を有効かどうか
disableAnimations	bool	アニメーションを無効にする設定をしているか
accessibleNavigation	bool	ユーザーがアクセシビリティのためにナビゲーション支援を有効かどうか
invertColors	bool	画面の色反転が有効かどうか
highContrast	bool	高コントラストモードを有効かどうか
gestureSettings	GestureSettings	タッチ感度などのジェスチャー設定