【Flutter】画面の向きでレイアウトを変える方法

画面サイズの変更を判定するにはLayoutBuilderクラスを使います。

LayoutBuilderについて

LayoutBuilderはBuilderによく似ていますが、Builderの機能に加えて親ウィジェットの最新のサイズを子ウィジェットに伝えることができます。

LayoutBuilder()は最初にレイアウトされた時や画面のサイズが変化した時にしか呼び出されないため、なるべく上の階層に配置するのが良いと思います。

サンプルコード

分かりやすいように画面の向きで色を変えています。
今回は単純に縦横で分岐しましたが、モバイルとデスクトップで表示量を変えたい時などは画面サイズを直接指定して細かく分岐が可能です。

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "Test App",
    debugShowCheckedModeBanner: false,
    theme: ThemeData.dark(),
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Test App")),
      body: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return constraints.maxWidth < constraints.maxHeight
            ? _buildVertical(context)
            : _buildHorizontal(context);
      },
    );
  }

  Widget _buildVertical(BuildContext context) {
    // 縦向きの場合
    return Container(
      alignment: Alignment.center,
      color: Colors.blue,
      child: Text("タテ", style: TextStyle(fontSize: 32)),
    );
  }

  Widget _buildHorizontal(BuildContext context) {
    // 横向きの場合
    return Container(
      alignment: Alignment.center,
      color: Colors.pink,
      child: Text("ヨコ", style: TextStyle(fontSize: 32)),
    );
  }
}

実行時(縦向き)

実行時(横向き)