【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)

하는 것으로, 가로폭과 세로폭이 표시되도록 하고 있으므로 참고로 해 주세요.