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(オレンジに設定した方)のサイズになっている。

 

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

 

 

本記事冒頭によると、子の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,
              ),
            ),

 

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

 

リリースしたアプリ(全てFlutterで開発)

OCR文字認識Fast -シンプルな高精度・日本語スキャナー

Google Play で手に入れよう
Download on the App Store

 

暗記用マーカー - シンプル穴埋め問題作成

Google Play で手に入れよう
Download on the App Store

 

超即ToDo –最短2タップで通知登録できるタスク管理アプリ

Google Play で手に入れよう
Download on the App Store

 

かんたんプリント管理:アラート・OCR文字認識・検索機能を搭載

Google Play で手に入れよう
Download on the App Store

 

シンプルメモ帳「BasicMemo」 - 文字カウント、ワンタッチ入力、タグ管理等の機能を搭載

Macのデスクトップ版もリリースしました。

Google Play で手に入れよう
Download on the App Store

 

個人アプリ開発で役立ったもの

おすすめの学習教材

超初心者向けでオススメな元Udemyの講座/

 

 \キャンペーン時を狙えば安価で本場の内容が学べる/

 

\Gitの基礎について無料で学べる/

 

おすすめの学習書籍

実用的image_pickerに関してかなり助けられた/

 

Dartの基礎文法を素早くインプットできる/


Dart入門 - Dartの要点をつかむためのクイックツアー

 

おすすめのソフトウェア

安くて高機能。アプリの独自ドメイン・紹介サイト構築に最適/

 

\アイコン作成・画面設計・クラウド保存...何でもできて超必須

Microsoft Public Affiliate Program (JP)(マイクロソフトアフィリエイトプログラム)

 

おすすめのハードウェア

\リーズナブルな価格で検証端末を確保できる/

 

\目線の高さを調節しやすく、疲れにくい

 

\キータッチが超静音で心地よい/

 

おすすめのサポートアイテム

\部屋の中を仕切って、集中できる開発環境を作れる/

 

\部屋の中でも大き過ぎず、長時間座っても疲れない

 

\バグと格闘した後の肩こりを解消してくれる/

タイトルとURLをコピーしました