【Flutter Widget of the Week #20】FittedBoxを使ってみた

はじめに

Flutter Widget of the Week #20 FittedBox についてまとめましたので、紹介します。
https://youtu.be/T4Uehk3_wlY

FittedBox

Flutter では多くの widget が Box の形をしており、それらを自由に配置することで画面を作っています。
画面を作っていると widget を入れ子にしたときに、widget が 親widget のサイズに収まりきらなかったことはないでしょうか。そんなときに効果的なのが、今回紹介する FittedBox です。
FittedBox を使えば、高さや幅を細かく指定しなくても 子widget を 親widget の枠に収めることができます。
では、さっそくサンプルを動かして使い方を見てみましょう。

FittedBox サンプルコード

左：FittedBoxなし　　　　　　　　　　　右：FittedBoxあり

サンプルコード全体

1. FittedBox なしの場合（左図）

main.dart

class FittedBoxSample extends StatelessWidget {
  const FittedBoxSample({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      width: 300,
      color: Colors.red,
      child: Image.network(
        'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
    );
  }
}

2. FittedBoxありの場合（右図）

main.dart

class FittedBoxSample extends StatelessWidget {
  const FittedBoxSample({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      width: 300,
      color: Colors.red,
      child: FittedBox(
        fit: BoxFit.fill,
        child: Image.network(
            'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
      ),
    );
  }
}

使い方としては、
まず 親widget（今回だと Container）の child に指定されている 子widget を FittedBox でラップします。
次に、fitプロパティで 子widget を 親widget にどのように組み込んであげるかを指定します。
以上によって、自動的に 親widget のサイズに収めるように調整してくれます。

FittedBox のプロパティについて

FittedBox にはプロパティがいくつかありますので、紹介します。

(new) FittedBox FittedBox({
  Key? key,
  BoxFit fit = BoxFit.contain,
  AlignmentGeometry alignment = Alignment.center,
  Clip clipBehavior = Clip.none,
  Widget? child,
})

①fit

レイアウト時に確保したスペース（親widget）に、どのように 子widget を組み込むかを指定する
型は BoxFit 型

②alignment

子widget を 親widget の境界線内のどこに配置するかを指定する
型は AlignmentGeometry 型

③clipBehavior

コンテンツに切り取り方を設定する
デフォルトは Clip.none
型は Clip 型

BoxFit について

続いて、FittedBox の fitプロパティ で使われる BoxFit にはいくつか種類があるので、ご紹介します。こちらは公式ドキュメントを引用しています。

BoxFit.fill

子widget の縦横比を歪めてでも、親widget いっぱいいっぱいに埋め込む

BoxFit.fill

BoxFit.contain

子widget を完全に 親widget 内に収めながら、可能な限り大きくする

BoxFit.contain

BoxFit.cover

親widget を完全に覆えるサイズになるまで広げる
BoxFit.fill とは異なり、子widget の縦横比は歪まない

BoxFit.cover

BoxFit.fitWidth

子widget の縦横比は変えずに、親widget と幅が揃うように拡大、縮小する

BoxFit.fitWidth

BoxFit.fitHeight

子widget の縦横比は変えずに、親widget と高さが揃うように拡大、縮小する

BoxFit.fitHeight

BoxFit.none

何もせず、親widget に収めずに表示する

BoxFit.none

BoxFit.scaleDown

子widget の縦横比を維持しながら、親widget 内に収まるように縮小する

BoxFit.scaleDown

最後に

今回は FittedBox を紹介しました。画像を枠内に収めたいと考えることはよくあると思います。すごく便利な widget なので是非使ってみてください。
次は #21 LayoutBuilder です。またお会いしましょう。

参考記事

https://api.flutter.dev/flutter/widgets/FittedBox-class.html
https://api.flutter.dev/flutter/painting/BoxFit.html