FlutterのBoxFitとAlignmentの組み合わせによる挙動

はじめに

Flutterの画像には与えられた領域にどう表示するかを決めるパラメータとして

• fit
• alignment

があります。この設定をいじるとレイアウトが変更されるのですが、挙動に少し迷う部分があるのでここにまとめます。

使う画像は正方形です。これを SizedBox によるいろんな形の入れ物に入れます。

ちなみに BoxFit にはいくつか種類がありますがこの記事では BoxFit.fitWidth しか扱いません。この記事のテーマの「縦方向か横方向の配置の自由度が生じたときにどう処理されるか」という点は BoxFit.fitWidth のひとつだけで説明が付くという判断をしました。

使うコードはこちら

home: Scaffold(
  body: Center(
    child: Container(
      decoration: const BoxDecoration(
        color: Colors.blue,
      ),
      padding: const EdgeInsets.all(5.0),
      child: SizedBox(
        height: 500.0,
        width: 500.0,
        child: Image.asset(
          'assets/images/test.png',
          fit: BoxFit.fitWidth, //ここがポイント
          alignment: const Alignment(0.0, 0.0), //ここがポイント
        ),
      ),
    ),
  ),
),

領域が縦500、横500

まずは正方形の領域に BoxFit.fitWidth Alignment(0.0, 0.0) とします。
与えられた領域が正方形、画像も正方形なので普通に表示してます。
Alignment(0.0, -1.0) としても Alignment(0.0, 1.0) としても変わりません。

領域の縦が長〜い、縦700、横500

与えられた領域の縦を長くします。画像は横をフィットさせるようにするので、縦方向の何かが余ります。

Alignment(0.0, 0.0)

まずは BoxFit.fitWidth Alignment(0.0, 0.0) とします。
真ん中ですね。

Alignment(0.0, -1.0)

次に BoxFit.fitWidth Alignment(0.0, -1.0) とします。
トップで合っています。

Alignment(0.0, 1.0)

次に BoxFit.fitWidth Alignment(0.0, 1.0) とします。
ボトムで合っています。

領域の縦が短〜い、縦300、横500

与えられた領域の縦を短くします。画像は横をフィットさせるようにするので、縦方向の何かがはみ出します。

Alignment(0.0, 0.0)

まずは BoxFit.fitWidth Alignment(0.0, 0.0) とします。
真ん中ですね。

Alignment(0.0, -1.0)

次に BoxFit.fitWidth Alignment(0.0, -1.0) とします。
トップで合っています。

Alignment(0.0, 1.0)

次に BoxFit.fitWidth Alignment(0.0, 1.0) とします。
ボトムで合っています。

まとめ

誤

-1にすると画像が上（or左）に移動する。
1にすると画像が下（or右）に移動する。
0にすると画像が真ん中。

正

-1にするとそれぞれのトップ（or左）を一致させる。
1にするとそれぞれのボトム（or右）を一致させる。
0にするとそれぞれの真ん中を一致させる。