【日本語版】【Flutter】Widget of the Week – #34 MediaQuery【要約】

動画

要約

  • MediaQueryを使えば、実行中デバイスの様々な情報を取得できる
  • 開発者はその情報をもとに、最適なレイアウトを切り替えられる
  • 取得できる情報は、画面のサイズ、デバイスの向き、文字サイズ設定、アニメーション制限の設定、明るさの設定等

内容

もしあなたが作っているアプリがスマートフォンとタブレット、両方での利用を想定している場合、あなたは画面のサイズに応じた別々のUIレイアウトを考えなければならないでしょう。

また、ユーザーがフォントサイズを大きく設定していたり、アニメーションを最小限にする設定にしていた場合にも、最適なレイアウトは変わってきます。
 

画面のサイズが変われば最適なレイアウトも変わる
ユーザーの文字の大きさの設定によっても最適なレイアウトは変わってくるかもしれない

あなたはこれらの情報をMediaQueryから取得することができます。

Widget ot the Weekで以前紹介したLayoutBuilderでも実際のサイズの情報を取得することができますが、MediaQueryを使えば、もっと多くの情報を詳細に取得することができます。

MediaQueryはいつでも使えます。
build関数の中でMediaQuery.ofを呼び出すだけです。
 

それだけであなたは実行中デバイスの多くの情報を取得することができ、その情報をもとに最適なレイアウトを構築することができます。
 

例えば、画面サイズを取得して、
そのサイズに応じてレイアウトを変えるロジックを書ける

MediaQueryを使えば、画面サイズ以外にもいろいろな情報を取得できます。
 

デバイスの向き(縦向きか横向きか)
ユーザーのフォントサイズ設定
デバイス機器やシステム側で隠されている画面の領域の情報
(領域についての説明はSafeArea参照)
ユーザーのアニメーション無効設定
ユーザーの画面の明るさ設定

まとめ

Widget of the Weekの#34 MediaQueryの日本語翻訳版でした。

MediaQueryを使うことで、実行デバイスのさまざまな情報にアクセスできます。

開発者は、MediaQueryを使うことで、様々なユーザーに対して最適なレイアウトや優れたユーザー体験を提供できるようになります。

■ 次の記事はこちら
#35 – Spacer

■Widget of the Week まとめ
Widget of the Week 一覧