ConstrainedBoxBoxConstraints を使うことで要素の大きさを制限します。

ConstrainedBoxとは

ConstrainedBox は、 BoxConstraints と組み合わせて使うことによって、中の要素の大きさを制限します。 限られた端末の画面内に要素を収めるために非常に重要な要素です。

使い方

ConstrainedBox は、引数 constraintsBoxConstraints を指定して使います。

ConstrainedBox(
  constraints: BoxConstraints(minWidth: 320.0, minHeight: 64.0),
  child: Container(color: Colors.red,),),

のように書きます。引数 child には、表示したい要素を指定します。 また、 BoxConstraints の引数には、 minWidthminHeightmaxWidthmaxHeight の 4 つの引数を任意に入れることができます。

BoxConstraints には、何も引数を指定しない場合、 minWidthminHeight0.0 で、 maxWidthmaxHeightdouble.infinity (無限大) が指定されます。 この場合、中の要素によって大きさが左右されるため、 ConstrainedBox は、あってもなくても結果は変わりません。 つまり、 BoxConstraints の引数は、必ず 1 つ以上指定しましょう。

いろいろなBoxConstraints

BoxConstraints いろいろな、便利なコンストラクタが用意されています。

例えば、

BoxConstraints.expand(height: 64.0) // (1)

は、幅・高さ共に広がるだけ広がり ( expand ) ます。ただし、引数として指定された、高さ height64.0 に固定になります。

BoxConstraints.expand(width: 320.0, height: 64.0) // (2)

は、 (1) の例と基本的に同じですが、幅も固定されます。

BoxConstraints.loose(Size(640.0, 64.0)) // (3)

は、幅は 640.0、 高さは 64.0 が最大値となります。表示領域が狭い場合は 0.0 まで縮まっていきます。

BoxConstraints.tight(Size(320.0, 64.0)) // (4)

は、 (2) の例と同じになります。

BoxConstraints.tightFor(height: 64.0)) // (4)

は、引数として指定された、高さ height64.0 に固定。指定されなかった要素は中の要素の大きさに合わせて広がります。

コードの例

例えば、コードは以下のようになります。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'わかりやすい'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          ConstrainedBox(
            constraints: BoxConstraints(minWidth: 320.0, minHeight: 64.0),
            child: Container(color: Colors.red,),),
          ConstrainedBox(
            constraints: BoxConstraints.expand(height: 64.0),
            child: Container(color: Colors.green,),),
          ConstrainedBox(
            constraints: BoxConstraints.expand(width: 320.0, height: 64.0),
            child: Container(color: Colors.blue,),),
          ConstrainedBox(
            constraints: BoxConstraints.loose(Size(640.0, 64.0)),
            child: Container(color: Colors.grey,),),
          ConstrainedBox(
            constraints: BoxConstraints.tight(Size(320.0, 64.0)),
            child: Container(color: Colors.red,),),
          ConstrainedBox(
            constraints: BoxConstraints.tightFor(height: 64.0),
            child: Container(color: Colors.green,),),
          ConstrainedBox(
            constraints: BoxConstraints(minWidth: 320.0, minHeight: 64.0),
            child: Container(color: Colors.blue, child: Text('おまけ'),),),
        ],
      ),
    );
  }
}

スクリーンショット

最後の「おまけ」は中の要素が小さいので、一番上の赤い帯と同じ書き方ですが、中の要素に Text が入っているので、それに合わせて最小幅まで縮まっています。

参考リンク