はじめに Flutterの画像には与えられた領域にどう表示するかを決めるパラメータとして fit alignment があります。この設定をいじるとレイアウトが変更されるのですが、挙動に少し迷う部分があるのでここにまとめます。 使う画像は正方形です。これを SizedBox によるいろんな形の入れ物に入れます。 ちなみに BoxFit にはいくつか種類がありますがこの記事では BoxFit.fitWidth しか扱いません。この記事のテーマの「縦方向か横方向の配置の自由度が生じたときにどう処理されるか」という点は BoxFit.fitWidth のひとつだけで説明が付くという判断をしました。 使うコードはこちら home: Scaffold( body: Center( child: Container( decoration: const BoxDecoration( color: Co
![FlutterのBoxFitとAlignmentの組み合わせによる挙動](https://cdn-ak-scissors.b.st-hatena.com/image/square/dea370f9a2646a79939490292ec35948ca68c59f/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--FWudplSj--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AFlutter%2525E3%252581%2525AEBoxFit%2525E3%252581%2525A8Alignment%2525E3%252581%2525AE%2525E7%2525B5%252584%2525E3%252581%2525BF%2525E5%252590%252588%2525E3%252582%25258F%2525E3%252581%25259B%2525E3%252581%2525AB%2525E3%252582%252588%2525E3%252582%25258B%2525E6%25258C%252599%2525E5%25258B%252595%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Asamekard_dev%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EvQUxtNXd1M3YxOTJvM0NNcmdvZFMzb3VjbjdWQk1oYTdKSUtfSEdJSDNra2dDdz1zOTYtYw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)