[解決済み] 親のサイズに基づいてウィジェットをレイアウトするには？

質問

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

例えば

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でこれを行う最良の方法は何でしょうか？

どのように解決するのですか？

あなたは LayoutBuilder ウィジェットを使いましょう。 を構築し、親ウィジェットの制約を提供します。

は LayoutBuilder を取り込みます。 build() 関数は、標準的な ビルドコンテキスト と共に BoxConstraints と共に、サイズに基づいてウィジェットを動的にレンダリングするために使用できるパラメータとして使用します。

親の幅が 200px より大きい場合は "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');
      }
    }
  ),
);