10. 플러터 : 사진 옵션(BoxFit)

하루종일 도서관에 앉아 뭘 하는지 모르겠다는 생각이 든다.
정리하지 않고 나만 알아도 되는 것을 왜 이렇게 열심인지..
하루 열심히 해도 2개나 3개밖에 못 만드는데..
우재야.. 너 때문이다!

Image 클래스에 들어가는 fit 옵션에 대해서 살펴보자.
fit 매개변수에 전달되는 값은 BoxFit 클래스에 정의된 enum 상수.
아래 화면을 보면 조금씩 다르게 출력되는 것을 알 수 있다.
첫 번째 사진이 원본이니까 나머지는 원본과 비교해서 보면 된다.

• 1번 : 원본. 가로세로 비율 변화 없음(contain)
  
• 2번 : 지정한 영역을 꽉 채운다. 비율 변경됨. 가장 많이 사용하는 옵션 중의 하나(fill)
• 3번 : 너비에 맞게 확대 또는 축소. 수평으로 크기 때문에 위아래 여백 발생(fitWidth)
• 4번 : 높이에 맞게 확대 또는 축소. 수평으로 크기 때문에 수평 잘리는 영역 발생(fitHeight)
• 5번 : 지정한 영역을 꽉 채운다. 비율 유지. 3번 또는 4번을 상황에 맞게 선택(cover)
• 6번 : 원본 크기 유지. 원본으로부터 해당 영역 크기만큼 가운데를 출력. 기본 옵션(none)

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 Column(children: <Widget>[
            Row(children: <Widget>[
                makeImage(BoxFit.contain),
                makeImage(BoxFit.fill),
            ]),
            Row(children: <Widget>[
                makeImage(BoxFit.fitWidth),
                makeImage(BoxFit.fitHeight),
            ]),
            Row(children: <Widget>[
                makeImage(BoxFit.cover),
                makeImage(BoxFit.none),
            ]),
        ]);
    }

    Widget makeImage(BoxFit option) {
        return Container(
            child: Image.asset('images/family_1.jpg', width: 200, height: 200, fit: option),
            padding: EdgeInsets.only(left: 2, right: 2, bottom: 1),
        );
    }
}

fit 옵션을 사용하려면 명확하게 크기를 지정해야 한다.
화면을 꽉 채우고 각각의 사진을 구분할 수 있도록 크기는 200으로 하고 여백을 조금 줬다.

두 번째 코드를 보자.
행과 열을 한 번에 처리해주는 클래스가 있다.
GridView 클래스라고 하는데 일반적으로 count 생성자를 통해 객체를 생성한다.

첫 번째 코드와 출력만 놓고 보면 비슷하게 하려고 했기 때문에 구분이 어렵다.
자세히 보면 사진의 간격이 다르다.
이렇게 얘기해도 잘 모르겠지만.

코드가 훨씬 간단하다.
여백을 내부적으로 처리해주기 때문에 Container 객체로 감싸지 않아도 된다.
그래서 앞에서 사용했던 makeImage 함수를 없애고 Image 객체를 children 매개변수에 바로 전달했다.

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),
            mainAxisSpacing: 5.0,
            crossAxisSpacing: 10.0,
            crossAxisCount: 2,
            children: <Widget>[
                Image.asset('images/family_1.jpg', fit: BoxFit.contain),
                Image.asset('images/family_1.jpg', fit: BoxFit.fill),
                Image.asset('images/family_1.jpg', fit: BoxFit.fitWidth),
                Image.asset('images/family_1.jpg', fit: BoxFit.fitHeight),
                Image.asset('images/family_1.jpg', fit: BoxFit.cover),
                Image.asset('images/family_1.jpg', fit: BoxFit.none),
            ],
        );
    }
}

padding은 GridView 클래스 객체 전체에 적용되는 여백이다.
mainAxisSpacing은 수평 기준으로 자식 위젯을 떨어뜨려야 하는 간격이고
crossAxisSpacing은 수직 기준으로 자식 위젯간의 간격이다.
crossAxisCount 매개변수가 가장 중요한데 열(column)에 들어가는 자식 위젯의 갯수를 말한다.