[Flutter] Image 이미지 box.fit 옵션 정리

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: '사진 옵션',
    home: Scaffold(
      appBar: AppBar(
        title: Text('사진 옵션'),
      ),
      body: MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: const EdgeInsets.all(5.0), //padding은 GridView 클래스 객체 전체에 적용되는 여백
      mainAxisSpacing: 5.0, //mainAxisSpacing은 수평 기준으로 자식 위젯을 떨어뜨려야 하는 간격
      crossAxisSpacing: 10.0, //crossAxisSpacing은 수직 기준으로 자식 위젯간의 간격
      crossAxisCount: 2,
      children: <Widget>[
        //원본. 가로세로 비율 변화 없음(contain)
        Image.asset('images/flutter.png', fit: BoxFit.contain),

        //지정한 영역을 꽉 채운다. 비율 변경됨. 가장 많이 사용하는 옵션 중의 하나(fill)
        Image.asset('images/flutter.png', fit: BoxFit.fill),

        //너비에 맞게 확대 또는 축소. 수평으로 크기 때문에 위아래 여백 발생(fitWidth)
        Image.asset('images/flutter.png', fit: BoxFit.fitWidth),

        //높이에 맞게 확대 또는 축소. 수평으로 크기 때문에 수평 잘리는 영역 발생(fitHeight)
        Image.asset('images/flutter.png', fit: BoxFit.fitHeight),

        //지정한 영역을 꽉 채운다. 비율 유지. 3번 또는 4번을 상황에 맞게 선택(cover)
        Image.asset('images/flutter.png', fit: BoxFit.cover),

        //원본 크기 유지. 원본으로부터 해당 영역 크기만큼 가운데를 출력. 기본 옵션(none)
        Image.asset('images/flutter.png', fit: BoxFit.none),
      ],
    );
  }
}

<결과>

참조 블로그

pythonkim.tistory.com/110