【 Flutter 】constraints を理解しよう！【Understanding constraints の解説】

｢ウィジェットが思うような大きさにならない…｣

本記事でこの悩みが解決できるかもしれません。

Flutter 公式のウィジェットの大きさ等に関するドキュメント、
Understanding Constraints を日本語で解説します。

Understanding constraints

Flutter's model for widget constraints, sizing, positioning, and how they interact.

docs.flutter.dev

ウィジェットの大きさの決定の仕方について、
仕組みから知りたい、というあなたにピッタリの記事となっています。

記事内では、様々な実装例をコードと横並びで確認できるWEBアプリを紹介します。

ぜひ読んでみてください！

Flutter のレイアウトの仕方

レイアウトのルール

Flutter のレイアウトは以下のルールに則って行われます。

Constraints go down. Sizes go up. Parent sets position.

日本語で解説すると、

制約は下ります。大きさは上ります。親が位置を決めます。

です。

より詳細に述べると以下になります。

1. ウィジェットは親(parent)から自身の制約(constraints)を取得します。
   constraintは4つのdouble型の値(最小と最大の幅(width),最小と最大の高さ(height))
   の集合です。
2. その後、ウィジェットはその制約を自身の子たち(children)に渡します。
   ひとつひとつの子ウィジェットが、その子たちに自身の制約を伝えます。
   （この制約はそれぞれの子で異なります。）
   そして、どれくらいの大きさになりたいか確認します。
3. ウィジェットは、子たちを配置します。
4. 最終的にウィジェットは親に自身の大きさ(size)を伝えます。
   (もちろん、制約の範囲内で伝えます。)

例

上で説明したルールでのレイアウト構築について、
図のようなレイアウト構築で行われるやりとりを、
ウィジェット(Widget)を擬人化し、会話する様子で紹介します。

以上が具体例となります！

制限について

上でお伝えしたルールの結果として、
Flutterのレイアウトエンジンにはいくつか重要な制限があります。

• ウィジェットは自身の大きさを親から与えられた制約の中で決定できます。
  これはつまり、ウィジェットはいつも欲しい大きさになれるわけではない、
  ということです。
• ウィジェットは画面上での自身の位置を知ることはできないし、決定しません。
  これは、そのウィジェットの親が位置を決めるからです。
• 親の大きさと位置は、さらにその親に依存するため、
  ツリー全体を考慮せずにウィジェットの大きさと位置を正確に定義することは
  不可能です。
• もしウィジェットがその親から異なる大きさを希望し、
  親がウィジェットを配置するのに十分な情報を持っていないなら、
  子の大きさは無視される可能性があります。
  配置の情報を定義する時は、具体的にしてください。
  

レイアウトの具体例

“Understanding Constraints”では上記を踏まえたレイアウトの具体例として、
29の例が紹介されています。

これらの例について、確認できるWEBアプリを用意しました。

constraints_examples

A new Flutter project.

umigishi-aoi.github.io

コードを横並びにして、
日本語にて例を確認できます。

ぜひこちらで様々なウィジェットの組み合わせによるレイアウトの
コードと結果を確認してみてください。

制約の Tight vs. Loose

制約がTightである、Looseである、という言葉の意味について解説します。

Tight

Tight(タイト)な制約は1つの大きさを指定します。
言い換えればTightな制約は幅の最大値と最小値が同じであり、
高さの最大値と最小値が同じである制約です。

Flutterのbox.dartのBoxConstraintsコンストラクタでは以下のように定義されています。

  BoxConstraints.tight(Size size)
    : minWidth = size.width,
      maxWidth = size.width,
      minHeight = size.height,
      maxHeight = size.height;

Example 2では赤いContainerが強制的に表示領域を埋め尽くすようになりました。
これは表示領域がTightな制約をContainerに与えていたからです。

https://github.com/Umigishi-Aoi/constraints_examples/blob/develop/lib/src/widgets/widget_base.dart#L44-L47

github.com

Loose

一方でLoose(ルーズ)な制約は、最大の幅と高さが設定されていますが、
ウィジェットは好きなだけ小さくなることができます。
つまり、最小の幅と高さは0です。

Flutterのbox.dartのBoxConstraintsコンストラクタでは以下のように定義されています。

  BoxConstraints.loose(Size size)
    : minWidth = 0.0,
      maxWidth = size.width,
      minHeight = 0.0,
      maxHeight = size.height;

Example 3 では Centerをにより、表示領域より小さい、という制約が渡されました。
つまり、Looseな制約がContainerに渡されたということです。

結局の所、ここでのCenterの役割は、親から渡されたTightな制約を、
Looseな制約に変換し子に渡すことです。

まとめ

本記事では、Flutter 公式のウィジェットの大きさ等に関するドキュメント、
Understanding Constraints を日本語で解説しました。

記事内で、様々な実装例をコードと横並びで確認できるWEBアプリを紹介しました。

いかがだったでしょうか？

ウィジェットのレイアウトの仕方が少しでもイメージできるようになったのであれば、
とても嬉しいです。

ぜひ本記事、また、元記事を繰り返し読んで、
理解を深めていただければと思います。

本記事があなたのアプリ開発の一助となれば幸いです。

編集後記（2022/12/27）