8. 플러터 : 사진 (2)

앞에서 배운 코드에 약간의 옵션을 추가해 보자.
사진을 화면 가운데 오도록 했는데.. 어떻게 했는지 알겠지?

사진이 화면보다 크기 때문에
사진이 수평으로 꽉 차야 하는데.. 왼쪽과 오른쪽에 조금 여백이 있지?
그리고 사진 색상을 조금 수정했고.

출력 크기는 언제나 width와 height로 정할 수 있어.
이번 예제에서는 크기를 지정하지 않고 padding 옵션을 사용해도 되지만
width와 height 옵션은 사진 출력의 가장 기본이니까.

그런데 여기서 중요한 것은 크기를 모두 지정할 경우에는
가로와 세로의 비율이 달라질 수도 있다는 거야. 지금은 달라지지 않았지만.
가로와 세로 비율이 달라지면 많은 경우에 보기 싫은 사진이 되겠지?

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 Center(
            child: Image.asset(
                'images/family_1.jpg',
                width: 400,
                height: 300,
                color: Colors.red,
                colorBlendMode: BlendMode.colorBurn,
            ),
        );
    }
}

color와 colorBlendMode는 그렇게 중요하진 않아.
여러 옵션이 있어서 이런 것도 있다는 걸 보여주려고 선택했을 뿐이다. 
colorBlendMode 옵션은 그림과 색상을 어떻게 조합할지 알려주는 역할을 해.

아래 사진을 보면 사진 비율이 달라진 것을 알 수 있어.
앞에서 얘기한 것처럼 원한다면 width와 height 옵션을 모두 설정하면 돼.

그리고 fit 옵션도 줘야 하지.
fit 옵션에 들어가는 데이터는 BoxFit 클래스(enum)의 값들.
fill을 비롯한 여러 옵션이 모두 중요하기 때문에 꼭 살펴봐야 한다.

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 Center(
            child: Image.asset(
                'images/family_1.jpg',
                width: 400,
                height: 100,
                fit: BoxFit.fill,
                color: Colors.red,
                colorBlendMode: BlendMode.colorBurn,
            ),
        );
    }
}