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

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

この記事からわかること

  • Flutter/Dart画面サイズ取得する方法
  • MediaQuery使い方

index

[open]

\ アプリをリリースしました /

みんなの誕生日

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

posted withアプリーチ

環境

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を取得する際は上位にWidgetsAppMaterialAppが存在している必要があるので注意してください。

プロパティ 説明
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 タッチ感度などのジェスチャー設定

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index