7. 플러터 : 사진 (1)

문자열을 넘어 사진에 도전해 보자.
사진(이미지)을 출력하기 위해서는 준비가 필요해.
다트는 프로젝트에서 사용할 환경 설정을 pubspec.yaml 파일을 통해서 처리하는데
어떤 사진을 사용할 것인지 이 파일에 얘기를 해야 돼.

알려주는 방법에는 두 가지가 있어.
첫 번째는 해당 폴더 전체 사용. 두 번째는 지정한 파일만 사용.
우리가 놀러가서 찍었던 사진을 4장 준비했고,
family_1.jpg, family_2.jpg, family_3.jpg, family_4.jpg라고 이름 붙였어.

family.zip

사진이 얼마나 필요할지는 모르겠지만
앞으로 나오는 모든 코드에서 가능하면 4장까지만 사용하는 걸로.

pubspec.yaml 파일을 열고 아래처럼 수정하자.
첫 번째로 images 폴더의 모든 사진 추가.
참.. 프로젝트에 먼저 images 폴더를 만들어야 한다.
주의할 점은 assets라는 폴더는 따로 만들 필요없고,
반드시 pubspec.yaml 파일이 있는 곳에 만들어야 한다.

flutter:
  uses-material-design: true
  assets:
  - images/

두 번째로 사용할 파일만 사용하는 방법.
아빠는 첫 번째가 편하기 때문에 앞의 코드를 사용하겠어.

flutter:
  uses-material-design: true
  assets:
  - images/family_1.jpg
  - images/family_2.jpg
  - images/family_3.jpg
  - images/family_4.jpg

pubspec.yaml 파일을 수정한 다음에는 파일 상단에 있는 Packages upgrade 메뉴를 눌러주는 것 잊지 말고.
새로운 패키지를 추가하는 경우에는 Packages get 메뉴를 사용할 때도 있고.
오른쪽에 보면 Flutter doctor가 있어서 콘솔에서 사용해야 하는 doctor 명령을 여기서 구동할 수도 있고.

어때, 잘 나왔지?
서핑 처음하러 갔을 땐가..?
실물보다 사진이 안 나와서 고를 만한게 잘 없었어.

사진 첫 번째 코드로 일단 그냥 출력하는 것부터 시작.

images 폴더 생성하고 사진 파일 붙여넣고 pubspec.yaml 파일 수정했다면
아래 코드에서 에러가 나진 않겠지?

Image 클래스에 있는 asset 생성자를 호출하면 끝.
여러 가지 옵션이 있지만 사진이 있는 경로만 전달하자.

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 Image.asset('images/family_1.jpg');
    }
}