[Flutter] FittedBoxについて理解を深めてみる

この記事は、株式会社ゆめみの23卒 Advent Calendar 2023のアドベントカレンダーになります！！
色々な種類の記事が投稿されるので、お楽しみに🤗

本編

こんにちわ、いせりゅーです。

今回は、FlutterKaigiのカンファレンスウェブサイトを作成していたときに知ったFittedBoxについて記載していこうと思います〜！

FittedBoxとは

↑こちらを参考にしています。

FittedBox・・・Scales and positions its child within itself according to fit.（fitに従ってその子のサイズを調整し、その子をその中に配置する）

これらを自分なりに解釈してみると

• 子ウィジェットが与えられた親のスペースに合うようにする。
• 可能な限り大きく表示できる
• オーバーフローすることなく、可能な限り大きく表示できる

使うといい例

• 画像を画面に合わせて拡大・縮小する
• 異なる画面サイズでテキストが切れないようにする
• アイコンをボタンなどの中で適切にフィットさせる

コードの例は公式のドキュメントから参考にし、自分なりに記載を行ってみました。

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('FittedBox Sample')),
        body: Center(
          child: Container(
            height: 400,
            width: 300,
            color: Colors.blue,
            child: const FittedBox(
              fit: BoxFit.fill,
              child: Placeholder(),
            ),
          ),
        ),
      ),
    );
  }
}

画像としては以下の通りになります。

最後に

実は知らなかったWidgetでした。まだまだ知らない世界があるのだなと学ぶことができました。
もっと知って、アウトプットしてWidgetマスターになりたいなと思いました。頑張ります🔥