LayoutBuilderのブレークポイント

CoddyのFlutterジャーニー「画面サイズに合わせたレイアウト」セクションの一部。レッスン 17/30。

タブレットでは、メールアプリのメニューはメッセージの横に表示されます。スマートフォンではスペースがないため、メニューは上に表示されます。レイアウトが変わる幅はブレークポイントと呼ばれます。

LayoutBuilderを使うと、ウィジェットがどれだけのスペースを持つかがわかり、サイズごとに異なるものを構築できます。

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      return Column(children: [menu, content]); // スマートフォン
    }
    return Row(children: [menu, content]); // タブレット
  },
)

builderは、constraints内の使用可能なスペースを受け取ってFlutterが呼び出す関数です。constraints.maxWidthは、結果に許される最大幅です。600ピクセル未満の場合はColumnを返し、それ以外の場合はRowを返します。幅390ピクセルのスマートフォンでは列が表示され、幅1000ピクセルのタブレットでは行が表示されます。

MediaQueryは画面全体を読み取ります。LayoutBuilderは1つのウィジェットのスペースを読み取るため、そのウィジェットが大きなページ内のパネルであっても機能します。

チャレンジ

中級

メニューとコンテンツは常に横並びになっているため、スマートフォンでは窮屈です。600ピクセルをブレークポイントとしてLayoutBuilderを使います。

幅が600未満の場合：メニューをコンテンツの上に配置し、Columnを使う
幅が600以上の場合：現在のように横並びにし、Rowを使う

自分で試してみよう

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Mail')),
        body: Row(
          children: [
            Expanded(
              child: Container(
                color: Colors.teal.shade100,
                child: const Center(child: Text('Menu')),
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.white,
                child: const Center(child: Text('Content')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}