タグ: layout

子ウィジェットが Row や Column 内の自分の割り当て分を埋める必要があるなら Expanded、割り当て分より小さくてもよいなら Flexible を使います。Flutter 3.44 での実測レイアウトで、余った領域の行き先、loose な子が兄弟に領域を譲らない理由、無制限の制約下で Flexible だけが使える場面を確認します。

高さの上限がない親 (Column や ListView など) の中で、ウィジェットが height: double.infinity を要求しています。Expanded、有限の高さ、LimitedBox、または SliverFillRemaining を使って解決します。

google_mobile_ads の公式サンプルは onAdLoaded まで何も描画しないため、画面が表示された数秒後にコンテンツが 150 dp 跳ねます。先にアンカー型アダプティブのサイズを取得し、SizedBox で領域を確保し、高さを起動をまたいで保存してから、広告を読み込みます。Flutter 3.44.8 と google_mobile_ads 9.1.0 で計測しました。

Android SDK 35 をターゲットにすると Flutter アプリは edge-to-edge モードになり、Scaffold の body がナビゲーションバーの背後に描画されます。オプトアウトするのではなく SafeArea と MediaQuery の padding でインセットを処理してください。そのオプトアウトは Android 16 ではすでに無効です。

キーボードは Scaffold の body の最大高さを縮めるため、ぎりぎり収まっていた Column があふれます。resizeToAvoidBottomInset を切るのではなく、body をスクロール可能にしてください。

長いリストでは shrinkWrap を絶対に使わないでください。リストが唯一のスクロール要素なら Expanded を、他のセクションとスクロールを共有するなら sliver（CustomScrollView）を使います。その理由を、build 回数のベンチマークとともに解説します。

色を decoration の中に移動します。color と decoration を同じ Container に渡すのではなく、decoration: BoxDecoration(color: ...) を使います。

このエラーは、Expanded または Flexible が Row、Column、Flex の直接の子でないことを意味します。flex ウィジェットの直下に移動するか、親が flex でないなら Expanded を外してください。

CustomScrollView の slivers リストは sliver しか受け付けません。box ウィジェットは SliverToBoxAdapter でラップするか、ListView／Padding／Column を SliverList や SliverPadding に置き換えてください。

ネストしたスクロール可能ウィジェットを使わずに、リストとグリッドを 1 つの連続したスクロールにまとめます。CustomScrollView と SliverList、SliverGrid を使い、パフォーマンスを静かに殺す shrinkWrap の罠を回避します。