【Flutter Widget of the Week #21】LayoutBuilderを使ってみた

はじめに

Flutter Widget of the Week #21 LayoutBuilder についてまとめましたので、紹介します。
https://youtu.be/IYDVcriKjsw

LayoutBuilder

事前に widget のサイズを取得し、そのサイズに応じて表示するコンテンツのレイアウトを変えたい！そんなとき LayoutBuilder が有用です。
では、サンプルを動かして使い方を見てみましょう。

LayoutBuilder サンプルコード

LayoutBuilder サンプル実行画面

サンプルコード全体

main.dart

class LayoutBuilderSample extends StatelessWidget {
  const LayoutBuilderSample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('LayoutBuilder Example')),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          if (constraints.maxWidth > 600) {
            return _buildWideContainers();
          } else {
            return _buildNormalContainer();
          }
        },
      ),
    );
  }

  Widget _buildNormalContainer() {
    return Center(
      child: Container(
        height: 100.0,
        width: 100.0,
        color: Colors.red,
      ),
    );
  }

  Widget _buildWideContainers() {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Container(
            height: 100.0,
            width: 100.0,
            color: Colors.red,
          ),
          Container(
            height: 100.0,
            width: 100.0,
            color: Colors.yellow,
          ),
        ],
      ),
    );
  }
}

使い方としては、
LayoutBuilder の builder プロパティで BoxConstraints を引数として受け取っています。
この BoxConstraints はその widget が持つ高さや幅の制限についての情報を持っているので、BoxConstraints のメソッドを用いて、 widget の高さや幅に応じて処理を変えられます。
サンプルのコードだと以下の if (constraints.maxWidth > 600) がBoxConstraints のメソッドを使った条件分岐となっています。
これは横幅の最大サイズが600 pxより大きければ _buildWideContainers() を実行し、600px以下であれば_buildNormalContainer()を実行するということです。

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    if (constraints.maxWidth > 600) { //
      return _buildWideContainers();
    } else {
      return _buildNormalContainer();
    }
  },
),

なので、画面サイズを変えると以下のように表示が変わります。

constraints.maxWidth > 600 の場合

constraints.maxWidth > 600 の場合

constraints.maxWidth <= 600 の場合

constraints.maxWidth <= 600 の場合

最後に

今回は LayoutBuilder を紹介しました。使ってみて、普通に MediaQueryなどで取得した値を使って分岐し、サイズによって表示が変わるように作っても良いが、LayoutBuilder を使って分岐した方が効果的だと思いました。レスポンシブ対応をうまく作りたいときに是非使ってみてください！
次は #22 AbsorbPointer です。またお会いしましょう。

参考記事

https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html