[Flutter] 외부 image 리소스 추가하고 보여주기

준비물 : 보여줄 이미지 파일 하나! ( png 파일만 됩니다.. jpg 안됨... )

따로 귀찮으신분은 우리집 강아지 파일을 샘플로 쓰면됨!

SimKoong.png

0.98MB

1. 신규 프로젝트 생성

프로젝트명 : sample_image_display //플러터는 프로젝트에 대문자 못씀

나머지는 굳이 똑같이 안해도 됨..

 

2. 외부이미지 추가

루트 폴더 밑에 assets 라는 폴더를 만든다. ( 폴더명은 임의로 만들어도 됨 )

거기에 보여줄 이미지 파일을 복사한다. 

 

3. 이미지 폴더 지정

pubspec.yaml 파일을 연다.

주석이 처리되어 있는 이미지 폴더 지정 부분을 찾는다.

# assets:
#   - images/a_dot_burr.jpeg
#   - images/a_dot_ham.jpeg

주석을 해제 하고, 방금 생성한 폴더를 써준다. 

파일을 하나씩 쓰면 귀찮으니 폴더로 지정한다.

 

assets:
  - assets/

assets: 앞은 공백2칸

-assets/ 앞은 공백 4칸으로 한다.

공백을 잘지키지 않으면 빨간색으로 표시되니 주의한다!

 

4. 플러터 기본 템플릿

main.dart 파일에서 불필요한 부분을 지우고 다음과 같이 만든다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        
      ),
    );
  }
}

이미지를 보여줄 위젯 을 추가한다.

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Image.asset("assets/SimKoong.png"), //<<- 추가
      ),
    );
  }
}

잘보여지는걸 확인한다. 

 

** 추가팁!

저장할때 소스정렬을 자동을 되게 하기 위해

File > Setting > Languages & Frameworks > Flutter

Format code on save 를 체크하자!