이번시간에는 지난 시간에 만든 코드를 활용해서 이미지를 넣어보도록 하겠습니다.
우선 이미지를 앱에 넣으려면 이미지가 있어야겠죠? 원하는 이미지를 하나 다운 받습니다. 그리고 어제 만든 Hello World앱을 열어서 Android Studio의 왼쪽 폴더목록에서 images라는 폴더를 하나 생성한 후 다운 받은 이미지를 드래그하여 그 폴더 안에 저장합니다.
저는 귀여운 고양이 이미지를 다운받아서 images폴더 안에 저장했습니다. 이 이미지를 앱에서 사용하기 위해서는 asset으로 등록을 해야하는데 그 방법은 다음과 같습니다.
루트폴더의 pubspec.yaml파일을 클릭하여 엽니다. 이 파일은 앱에 필요한 각종 설정값이나 환경변수들을 저장해 두는 곳인데요. 여기서 assets:이 설정되어있는 부분을 찾습니다.
현재는 아무 asset이 없으므로 주석처리가 되어있는데 주석을 없애고 이미지가 저장된 경로를 명시하여 asset을 설정합니다.
Yaml파일에 값을 추가할때는 들여쓰기에 주의해주세요.
다시 main.dart파일을 열어서 지난 시간에 body부분에 넣었던 Text()함수 대신에 아래와 같이 Image()함수로 대체합니다.
body: const Center(
child: Image(
image: AssetImage('images/cat.png'),
),
),
image속성의 값으로AssetImage()대신 인터넷상에 있는 주소를 그대로 갖다 쓰고 싶으면NetworkImage()를 써도 됩니다. 하지만 안정적인 서비스를 위해AssetImage()의 사용을 추천드립니다.
완성된 전체 코드는 아래와 같습니다.
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Image Assets'),
),
body: const Center(
child: Image(
image: AssetImage('images/cat.png'),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => {},
child: const Text('float'),
),
bottomNavigationBar: const Text('bottomNavigationBar'),
),
),
);
}
실행하면 다음과 같이 예쁜 이미지가 body안에 들어갑니다.
다음 시간에는 앱에서 제공하는 다양한 아이콘들을 활용해보는 시간을 갖도록 하겠습니다. 감사합니다.