くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

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: [/*...*/]),
      );
    },
  );
}

以上!!

参考にしたサイト様