Flutterで画面サイズや向きを取得する(MediaQuery/OrientationBuilder)

画面のサイズ(MediaQuery/Size)

Flutterで画面サイズを取得するときは、MediaQueryを使うらしい。
Sizeを取得できるので、そこからいろいろする感じ。

@override
Widget build(BuildContext context) {
  // 画面サイズの取得
  final Size size = MediaQuery.of(context).size;
  // 横幅
  double width = size.width;
  // 高さ
  double height = size.height;
  // アスペクト比
  double aspectRatio = size.aspectRatio;
  // 長い方
  double longestSide  = size.longestSide;
  // 短い方
  double shortestSide = size.shortestSide;

  return new Container();
}

画面の向き(OrientationBuilder/Orientation)

画面の向きによってレイアウトとかを変えたい場合は、OrientationBuilderをつかうよう。

公式CookbookのUpdate the UI based on orientationに書いてあった。

@override
Widget build(BuildContext context) {
  return OrientationBuilder(
    builder: (context, orientation) {
      return GridView.count(
        // 縦長の場合は2列、横長の場合は3列のGridView
        crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
        children: [/*...*/]),
      );
    },
  );
}

以上!!

こんなのつくってます!!

積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました!
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ノ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト様

Originally published at www.memory-lovers.blog
ツイッターでシェア
みんなに共有、忘れないようにメモ

きらぷか@i18n補助ツール『トランスノート』開発者

フリーエンジニア/今はNuxt.js/いつかFlutter 受託&アプリ/Webサービス/ゲームを #個人開発 CS修士→SIer/R&D→フリー #paiza はAランクで満足/AtCoderしたい 仕事依頼やご相談はDMまで Kotlin/Python/Swift/Unity/Java/Haskell/DDD

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント