【Flutter】【LayoutBuilder】画面を横にしたときに、レイアウトエラーが起きないようにする

まえがき

Flutterでアプリ開発をしてると、画面が横になったときにレイアウトのエラーが起きてしまいますよね。

これは困るな〜

LayoutBuilderを使うと、横になったときに横になったとき用の、レイアウトが組めるようになります。

LayoutBuilder

これは、Widgetが建てたれる範囲を測ってくれます。

そこでサイズに合わせて建てるWidgetを条件分けしたりできます。

サンプル

今回はSimulatorのiPhone SEでビルドしています。

まぁちょっと一瞬ぐちゃっと見えますが、一旦レイアウトエラーが起きないことに注目しましょう。

import 'package:flutter/material.dart';

class SampleLayputBuilder extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _SampleLayputBuilder();
}

class _SampleLayputBuilder extends State<SampleLayputBuilder> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LayputBuilder使ってない'),
      ),
      body: LayoutBuilder(
        builder: (context, constraints) {
          print(constraints);
          if (constraints.maxWidth < 600) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                imageExplanation(),
                image(),
              ],
            );
          } else {
            return Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                imageExplanation(),
                image(),
              ],
            );
          }
        },
      ),
    );
  }

  Widget imageExplanation() {
    return Text(
      'この写真は、こないだ海で撮影したものです。\n彼女とデートしたときに追いかけっこをしました。\nワハハと笑って楽しかったです。',
      style: TextStyle(fontWeight: FontWeight.bold),
    );
  }

  Widget image() {
    return Image.asset('images/sample1.png');
  }
}

説明

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      return verticalWidget() //縦向きのWidget
    } else {
      return horizontalWidget() //横向きのWidget
    }
  },
),

Widgetが建てられるサイズをconstraintsに入れています。
constraints.maxWidth < 600は横の最大の長さが600以下かそうでないかで条件分けしています。

サンプルのコードでは

print(constraints)

することで、横幅と縦幅が表示されるようにしてるので参考にしてみてください。