MENU
SwiftUI/Flutter/Vue等でアプリ開発
  1. ホーム
  2. dev
  3. Flutter
  4. [Flutter] レスポンシブ対応(LayoutBuilder)

[Flutter] レスポンシブ対応(LayoutBuilder)

Flutter

LayoutBuilderは、親ウィジェットのサイズに合わせて、子ウィジェットのレイアウトを調整するためのウィジェットです。レスポンシブなUIを作成する場合に非常に便利であり、特に画面サイズが異なる場合に役立ちます。LayoutBuilderは、以下のように使用できます。

Flutterでレスポンシブ対応する方法として、MediaQueryを利用する方法もあります。MediaQueryについては別記事にまとめているので、よかったら、そちらも見てみてください。

あわせて読みたい
[Flutter] レスポンシブ対応(MediaQuery) Flutterは、スマートフォンやタブレットなどのデバイスに合わせてアプリのレイアウトを調整するために、多くの便利な機能を提供しています。その中でも、MediaQueryはデ…
目次

基本的な書き方

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    return YourWidget();
  }
)

この例では、LayoutBuilderはYourWidgetを返します。LayoutBuilderが返すウィジェットは、親ウィジェットのサイズに合わせてレイアウトが調整されます。引数のBuildContextとBoxConstraintsについて説明します。

  • BuildContextは、ウィジェットツリーの親子関係において、ウィジェットがどこに位置するかを特定するために使用されます。BuildContextは通常、ビルドメソッド内で取得できます。
  • BoxConstraintsは、ウィジェットのサイズと位置を決定するために使用される制約のセットです。BoxConstraintsには、最小幅、最大幅、最小高さ、最大高さなどのプロパティが含まれています。これらの制約は、LayoutBuilderがウィジェットをレイアウトするために使用されます。

サンプルコード

では、実際にLayoutBuilderを使用してみましょう。以下の例では、横幅のサイズに応じて、呼び出すウィジットを変えています。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomepage(),
    );
  }
}

class MyHomepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            if (constraints.maxWidth > 600) {
              return WideWidget(maxWidth: constraints.maxWidth);
            } else {
              return NarrowWidget(maxWidth: constraints.maxWidth);
            }
            ;
          },
        ),
      ),
    );
  }
}

class WideWidget extends StatelessWidget {
  final double maxWidth;

  WideWidget({required this.maxWidth});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('width:600pxより大きいウィジット'),
        backgroundColor: Colors.red,
      ),
      body: Center(
          child: Text(
        'Wide Widget',
        style: TextStyle(fontSize: 40),
      )),
    );
  }
}

class NarrowWidget extends StatelessWidget {
  final double maxWidth;

  NarrowWidget({required this.maxWidth});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('600px以下のウィジット'),
      ),
      body: Center(
          child: Text(
        'Narrow Widget',
        style: TextStyle(fontSize: 30),
      )),
    );
  }
}

上記サンプルコードでは、横幅のサイズによって、呼び出すウィジットが変わっています。(600pxより大きい:WideWidget、600px以下:NarrowWidget)

サンプルコードではブレイクポイントは600pxの1箇所ですが、実際にはより細かくブレイクポイントを設けることで、モバイル/タブレット/PC等に柔軟に対応可能な画面が作成可能となります。

LayoutBuilderは、レスポンシブなUIを作成する場合に非常に便利であり、Flutterの開発においてよく使用されるウィジェットの1つですので、是非使ってみましょう！

Flutter
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次