56chのブログ

そこそこ技術が好きな人

Flutterでは子要素が無限に大きくなってしまうことがある

Understanding constraints | Flutter

Flexibleや、Expandedと言ったコンポーネントが制約なしで使われると本番ビルド時のみ、エラーが発生しグレーの帯で隠されるということが起きる。

image block

エラーメッセージが出ないため、非常に面倒くさい。

これは、FlexibleやExpandedといった動的なサイズのコンポーネントを制約なしで使う事により発生する。

解決法、FlexibleやExpandedなどのコンポーネントを使わないか、正しく条件を付ける。

こんな感じ

Container(
  width: 200,
  height: 200,
  child: Row(
    children: [
      Expanded(
        child: Container(
          color: Colors.red,
        ),
      ),
      Expanded(
        child: Container(
          color: Colors.blue,
        ),
      ),
    ],
  ),
);

参考までに、端末の大きさを取得するコードを置いておく

double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;