[Flutter] 이미지 Image 추가 & 등록 & Image 위젯 사용하기

 

안녕하세욧 >_< 

flutter 에서 Image 추가하여 Image 위젯을 사용하는 방법을 알아볼게용! 저는 VsCode 로 진행하였습니다~

 

1. assets/images 폴더 생성 및 이미지 추가

 

일단 프로젝트를 열어줍니다.

그리고 프로젝트 바로 하위 경로에 assets 폴더를 만들어줘요!
프로젝트 옆 New Folder 버튼을 클릭하면 새로운 폴더를 추가할 수 있습니다.

 

폴더명을 assets 로 지정해주세요~

 

assets 폴더가 생기면 assets 폴더의 마우스 오른쪽 버튼을 클릭하여 New Folder 를 클릭합니다.

 

그리고 images 라는 폴더를 만들어주세요~

 

사용할 이미지 파일들을 assets/images 경로에 끌어다 넣어서 추가해줍니다~

 

 

2. pubspec.yaml 에 이미지 파일 등록

 

이제 pubspec.yaml 파일에 이미지들을 등록해줘야 해요!
assets:
밑에 이미지 파일들의 경로를 추가하여 등록해 줍니다~
assets/images/파일이름.확장자 형태 로 입력해 줍니다.

 

assets/images 폴더 내에 있는 파일이름을 하나하나 입력하지 않고

- assets/images/ (경로/ 까지만 입력) 까지만 입력하면 해당 폴더 내 모든 파일이 등록됩니다.

 

 

3. flutter pub get 명령어 실행

 

입력 후 프로젝트의 TERMINAL 에서 flutter pub get 명령어를 입력하여 실행해줍니다!

 

Android Studio 에서 flutter pub get 명령어 대신 Pub get 버튼을 클릭하여 진행해도 무관합니다~!

 

 

4. dart 파일에 Image 위젯 사용

 

그럼 이제 .dart 파일에서 이미지를 띄워볼게유~

 

Image.asset( 이미지 경로 ),

 

Image.asset( 이미지 경로 ),

이런 형태를 통해 이미지 파일을 화면에 띄울 수 있어요!

import 'package:flutter/material.dart';

class MainPage extends StatelessWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MainPage'),
      ),
      body: Container(
        child: Image.asset('assets/images/img_blue.png'),
      ),
    );
  }
}

 

짜잔~

 

 

Image.network( 이미지 URL ),

 

만약 이미지 URL 을 사용하고 싶을 땐

Image.network( 이미지 URL ),

이런 형태를 통해 이미지 파일을 화면에 띄울 수 있어요!

 

 

감사합니다 - 💛