2020/10/21 Flutter : Understanding constraintsの訳パート3(Example11〜20)

⇦前ページ

Example 11

Example 11 layout

Center(
  child: ConstrainedBox(
     constraints: BoxConstraints(
        minWidth: 70,
        minHeight: 70,
        maxWidth: 150,
        maxHeight: 150,
        ),
     child: Container(color: Colors.red, width: 1000, height: 1000),
  )
)

CenterウィジェットはConstrainedBoxウィジェットに対して、スクリーンサイズを上限とする任意のサイズを認めます。

ConstrainedBoxウィジェットは、そのconstraintsパラメーターに基づき、その子ウィジェットに追加の制約を課します。

Containerウィジェットは、幅、高さが70〜150pxでなければなりません。Containerウィジェット自体は1000pxと指定されています。結果的にContainerウィジェットの幅・高さは150px(最大)となります。


Example12

Example 12 layout

Center(
   child: ConstrainedBox(
      constraints: BoxConstraints(
         minWidth: 70,
         minHeight: 70,
         maxWidth: 150,
         maxHeight: 150,
      ),
      child: Container(color: Colors.red, width: 100, height: 100),
   )
)

CenterウィジェットはConstrainedBoxウィジェットに対して、スクリーンサイズを上限とする任意のサイズを認めます。

ConstrainedBoxウィジェットは、そのconstraintsパラメーターに基づき、その子ウィジェットに追加の制約を課します。

Containerウィジェットは、幅、高さが70〜150pxでなければなりません。Containerウィジェット自体は100pxと指定されています。結果的に希望通り幅・高さ100pxと決定されます。


Example13

Example 13 layout

UnconstrainedBox(
   child: Container(color: Colors.red, width: 20, height: 50),
)

スクリーンはUnconstrainedBoxウィジェットに対し、スクリーンと同じサイズになることを強制しますが、しかし、UnconstrainedBoxは自身の子ウィジェット(赤Containerウィジェット)に対し任意のサイズを認めます。


Example14

Example 14 layout

UnconstrainedBox(
   child: Container(color: Colors.red, width: 4000, height: 50),
)

スクリーンはUnconstrainedBoxウィジェットに対し、スクリーンと同じサイズになることを強制します。

そしてUnconstrainedBoxウィジェットは、自身の子ウィジェットのContainerウィジェットに対し、任意のサイズを認めます。

残念なことに、このサンプルではContainerウィジェットの幅が4000pxに指定されており、これはUnconstrainedBoxウィジェットの幅(=スクリーン幅)におさまりません。

そのため、UnconstrainedBoxは非常に恐ろしい「オーバーフロー警告」を表示します。


Example15

Example 15 layout

OverflowBox(
   minWidth: 0.0,
   minHeight: 0.0,
   maxWidth: double.infinity,
   maxHeight: double.infinity,
   child: Container(color: Colors.red, width: 4000, height: 50),
);

スクリーンはOverflowBoxウィジェットに対し、スクリーンと同じサイズになることを強制します。

そしてOverflowBoxウィジェットは、自身の子ウィジェットのContainerウィジェットに対し、任意のサイズを認めます。

OverflowBoxウィジェットは、UnconstrainedBoxウィジェットと似ていますが、両者の違いは、(OverflowBoxウィジェットは)子ウィジェットが自身のサイズを超えても警告を出さないことです。

Example15では、Containerウィジェットは幅が4000pxと指定されています。これはOverflowBoxウィジェットの幅(=スクリーン幅)を超えています。しかしオーバーフロー警告を示さず、シンプルに表示します。


Example16

Example 16 layout  ←エラー発生。

UnconstrainedBox(
   child: Container(
      color: Colors.red,
      width: double.infinity,
      height: 100,
   )
)

 

これは何もレンダーしません。そしてコンソールにエラーメッセージが表示されます。

UnconstrainedBoxは自身の子ウィジェットに対し任意のサイズを認めますが、しかし子ウィジェットは無限の幅が指定されたContainerウィジェットです。

Flutterは無限のサイズをレンダーすることができません。ですから以下のエラーメッセージを表示し、エラーをスローします。

BoxConstraints forces an infinite width.


Example17

Example 17 layout

UnconstrainedBox(
   child: LimitedBox(
      maxWidth: 100,
      child: Container(
         color: Colors.red,
         width: double.infinity,
         height: 100,
      )
   )
)

Example17ではエラーは出ません。UnconstrainedBoxウィジェットは、自身の子ウィジェットに対し任意のサイズを認めますので、この場合無限の幅を認めることになります。それだけだとエラーが発生することになります(Example14)。

しかしExample17のように、無限の幅が指定されている子(Container)ウィジェットをLimitedBoxウィジェットでラップすると、Containerウィジェットに対し、上限幅(maxWidth)である100pxを渡します。

UnconstrainedBoxをCenterウィジェットに交換すると、LimitedBoxはその制限を適用しなくなり(制限は無限の制約を取得した場合にのみ適用されるため)、コンテナの幅は100を超えて拡大できます。

LimitedBoxウィジェットについてはこちら


Example18

Example 18 layout

FittedBox(
   child: Text('Some Example Text.'),
)

スクリーンはFittedBoxに対して、スクリーンと同じサイズになることを強制します。テキストには、テキストの量やフォントサイズなどに応じて、自然な幅(固有の幅とも呼ばれます)があります。

FittedBoxウィジェットはTextウィジェットに対して(原則的には)任意のサイズを認めますが、しかし、Textウィジェットが自身のサイズをFittedBoxウィジェットに伝えた後、FittedBoxウイジェットは、利用可能な幅(ここではスクリーン幅)に合わせてTextウィジェットの幅を調節します。

(「任意のサイズを認める」と言っているが、結局文字数によってフォントサイズが変わることになる。)

FittedBoxウィジェットについてはこちら


Example19

Example 19 layout

Center(
   child: FittedBox(
      child: Text('Some Example Text.'),
   )
)

FittedBoxをCenterウィジェットでラップしたらどうなるでしょうか?

CenterウィジェットはFittedBoxウィジェットに対して、スクリーンサイズを上限に任意のサイズを認めます。

それからFittedBoxは、自身のサイズをTextウィジェットに合わせます。そしてTextウィジェットに対し、任意のサイズを認めます。FittedBoxウィジェットのサイズとTextウィジェットのサイズが同じなので、サイズの調節は行われません。


Example20

 

しかし、

工事中🏗

 

 

参考

https://flutter.dev/docs/development/ui/layout/constraints

コメントを残す

メールアドレスが公開されることはありません。