【Flutter】ConstrainedBoxの使い方｜高さ・横幅に最大値・最小値を設定する

2023年1月14日2024年1月30日

「ウィジェットの大きさに最大値と最小値を設定したい」

こんな時に便利なのが ConstrainedBox ウィジェットです。

ConstrainedBoxを使用することで指定したウィジェットの高さと横幅に対し最大値と最小値を設定でき、ウィジェットのサイズが最大値と最小値の間であれば元のサイズが使用されます。

それではConstrainedBoxの基本的な使い方とカスタマイズ方法について解説していきます！

✔︎ レイアウトボックス一覧

基本的な使い方

ConstrainedBoxの基本的な使い方について解説します。

ConstrainedBoxのchildプロパティに最大値または最小値を設定したいウィジェットを渡し、constraintsプロパティにBoxConstraintsウィジェットを渡します。

BoxConstraintsのmaxWidthプロパティで横幅の最大値、maxHightプロパティで高さの最大値、minWidthプロパティで横幅の最小値、minHightプロパティで高さの最小値を設定します。

ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: 300,
    maxHeight: 300,
    minWidth: 50,
    minHeight: 50,
  ),
  child: MyWidget(),
),

画像のサンプルコード

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      body: Center(
        child: ConstrainedBox(
          constraints: BoxConstraints(
            maxWidth: 300,
            maxHeight: 300,
            minWidth: 50,
            minHeight: 50,
          ),
          child: Text(
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna fermentum iaculis eu non diam phasellus. Varius quam quisque id diam vel quam elementum pulvinar etiam. Mattis molestie a iaculis at. Ultrices dui sapien eget mi proin sed libero. Fermentum iaculis eu non diam phasellus.",
            style: TextStyle(
              fontSize: 22,
              overflow: TextOverflow.fade,
            ),
          ),
        ),
      ),
    );
  }
}

カスタマイズ方法

続いてConstrainedBoxのカスタマイズ方法について解説します。

子ウィジェットを指定したサイズいっぱいに広げる

ConstrainedBoxのconstraintsプロパティにBoxConstraints.expandコンストラクタを渡し、BoxConstraints.expandのwidthプロパティとheightプロパティで設定したサイズいっぱいに子ウィジェットを広げられます。

widthとheightプロパティのデフォルト値はdouble.infinityで、サイズを設定しない場合は親ウィジェットが許す範囲いっぱいに広がります。

ConstrainedBox(
  constraints: BoxConstraints.expand(
    width: 200,
    height: 400,
  ),
  child: MyWidget(),
),

まとめ

今回はConstrainedBoxの基本的な使い方とカスタマイズ方法について解説しました。

ConstrainedBoxを使用することで指定したウィジェットの高さと横幅に対し最大値と最小値を設定できるのでぜひ使ってみてください。

参考サイト