🔬

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

2022/11/01に公開

Flutter

はじめに

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) としても変わりません。