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

この記事からわかること
- Flutter/Dartの画面サイズを取得する方法
- MediaQueryの使い方
index
[open]
\ アプリをリリースしました /
環境
- Android Studio:Koala
- Xcode:16.0
- Flutter:3.29.2
- Dart:3.7.2
- Mac M1:Sonoma 14.6.1
Flutterで画面サイズを取得する
Flutterで画面サイズを取得するにはMediaQuery
を使用します。of
でコンテキストをセットしたあとsize.width
で画面の横幅をsize.height
で画面の高さを取得できます。
double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
これを使用することでUI要素をレスポンシブな(端末サイズに柔軟に対応した)サイズで指定することが可能になります。
MediaQuery
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 | タッチ感度などのジェスチャー設定 |
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。