Flutter: 親Container内に小さいContainerを置きたいが、親のサイズまで広がってしまう

結論：親Containerに「alignment:」プロパティを設定する

2022/6/14　Flutter エラー・バグ日記

簡単にできると思ったことが意外にできず、ハマる。

恐らく常識レベルの話だったと思われるが、、、原因や対処法に関する情報を見つけるのに、やや手間取ったので、記録。

本記事はライトな日記思考で書いているので、詳細説明はしておらず、基本、テキストのみで画像とかは載せておりません。。m(_ _)m

解説記事ではないため、解決していない内容や、その時々の間違った解釈を述べてしまっている可能性が大いにありますので、何卒、ご了承ください。

親Containerの中に、親よりも小さいサイズのContainerを配置したくて、下記のような単純なコードを書いて実行した。

Container(
              width: 50,
              height: 30,
              color: Colors.orange,
              child: Container(
                width: 10,
                height: 20,
                color: Colors.blue,
              ),
            ),

これで、オレンジのContainerの中に、青の小さいCotainerが表示されるかと思いきや、なぜか青のContainerしか表示されない。

しかも表示サイズが、親Container（オレンジに設定した方）のサイズになっている。

試行錯誤しても原因が分からないので、ネットで調べるも、なかなか該当する情報が見つからなかったが、ようやく下記記事にたどり着く。

Flutter: Sizing a Container inside another Container - KindaCode

To size a Container that resides inside another Container, you need to set the alignment property of the parent Container to an alignment value.

本記事冒頭によると、子のContainerにサイズを設定しても、親のContainerのサイズに広げられてしまうらしく、それを防ぐには、親側に「alignment:」プロパティの設定が必要とのこと。

こんな基本的な制約があったとは。。今までたまたま「alignment:」を設定していたから、気づかなかっただけか、、。

そこで、「Container」クラスの公式情報を確認したところ、「Layout behavior」の項目のところに、下記内容の記載があり（Google翻訳の結果を使用）、この辺りの記述が根拠と思われる。

Containerは、配置（alignment）を尊重し、子に合わせてサイズを調整し、幅、高さ、制約を尊重し、親に合わせて拡張し、可能な限り小さくしようとします。
Widgetに子、高さ、幅、制約、および配置（alignment）がないが、親が制限付き制約を提供する場合、Containerは親によって提供される制約に合うように拡張されます。

早速、下記のように「alignment」を入れたら、無事、オレンジのContainerの中に、小さい青のContainerを表示することができた。

Container(
              width: 50,
              height: 30,
              color: Colors.orange,

              // ↓これを追加
              alignment: Alignment.center,

              child: Container(
                width: 10,
                height: 20,
                color: Colors.blue,
              ),
            ),

＼一般的なエラー対処法をまとめた記事はこちら／