FittedBox 클래스(서로 다른 크기의 box를 합치기)

서로 다른 크기의 컨테이너 등 을 하나로 합치고 싶을 때 유용한 FittedBox클래스

부모의 컨테이너 크기에 따라 자식 컨테이너가 크기를 따라감 (BoxFit 옵션에 따라 자식의 콘텐츠 크기가 변함)

 

BoxFit.contain //원본 가로세로 변화 없음

BoxFit.fill // 꽉 채우기 비율이 변경됨

BoxFit.fitWidth // 너비 기준으로 크기 맞춤

BoxFit.fitHeight // 높이 기준으로 크기 맞춤

BoxFit.cover // 원본 비율을 유지 한체 꽉 채우기

BoxFit.none // 원본의 크기만큼 가운데 출력

[예제]

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: MyStatelessWidget(),
        ),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({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'),
      ),
    );
  }
}