親のサイズに基づいてウィジェットをレイアウトするにはどうすればよいですか？

Question

可変サイズの親ウィジェットがあるとします。例えば

：

var container = new Container(
    height: 200.0, // Imagine this might change 
    width: 200.0, // Imagine this might change 
    // Imagine content in this container will 
    // depend on the parent container 
    child: new Container(), 
); 

そして多分あなたはそれが与えられたということどのようなサイズに基づいて別の何かをレンダリングするために、親コンテナの子を持つようにしたいです。

レスポンシブデザインブレークポイントを考えてみましょう。幅がXを超える場合はこのレイアウトを使用し、幅がX未満の場合はレイアウトを使用してください。

Flutterでこれを行うには、どのような方法が最適ですか？

Answer 1

ウィジェットはLayoutBuilderで、レイアウト時にビルドされ、親ウィジェットの制約が適用されます。

LayoutBuilderは、BuildContextという標準を持ち、サイズに基づいてウィジェットを動的にレンダリングするのに役立つパラメータとしてBoxConstraintsを持ちます。

親の幅が200dpより大きい場合は "LARGE"、親の幅がそれより小さいか小さい場合は "SMALL"をレンダリングするウィジェットの簡単な例を作成できます。

var container = new Container(
    // Toggling width from 100 to 300 will change what is rendered 
    // in the child container 
    width: 100.0, 
    // width: 300.0 
    child: new LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) { 
     if(constraints.maxWidth > 200.0) { 
     return new Text('BIG'); 
     } else { 
     return new Text('SMALL'); 
     } 
    } 
), 
);