Flutter 프로젝트에 이미지 파일 추가하여 사용하기

Flutter 프로젝트에 이미지 파일을 추가하여 사용하는 방법을 다루고 있습니다.

2022. 7.23  최초작성

프로젝트 이름을 선택하고 마우스 우클릭하여 메뉴에서 New > Directory를 선택합니다. 

 

assets를 입력한 후, 엔터키를 누릅니다.

 

프로젝트 창에 assets 디렉토리가 추가되었습니다. 

 

assets 디렉토리가 선택된 상태에서 마우스 우클릭하여 메뉴에서 New > Directory를 선택합니다. images를 입력하고 엔터를 누릅니다. 

 

assets 디렉터리 아래에 images 디렉토리가 생성되었습니다.

이미지를 준비하고 프로젝트 창의 images 디렉토리에 이미지 파일을 드래그앤 드랍합니다.

다음 창이 보이면 Refactor 버튼을 클릭합니다. 

 

assets > images 디렉토리에 이미지 파일이 추가됩니다.

 

프로젝트창에서 pubspec.yaml 파일을 더블클릭하여 해당 파일을 엽니다.  

 

 

추가한 이미지를 다음처럼 적어줘야 합니다. assets > images에 추가된 모든 이미지를 프로젝트의 코드에서 사용할 수 있게 됩니다.

 

assets:     - assets/images/

main.dart 파일에 다음 코드를 사용합니다.

 

 

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return MaterialApp(       home: Scaffold(         appBar: AppBar(           title: Text("Image from assets"),         ),         body: Image.asset('assets/images/apple1.jpeg'),  // 여기에 경로를 포함하여 이미지 파일 이름을 적습니다.       ),     );   } }

실행하면 다음처럼 이미지가 보입니다.

 

참고 https://stackoverflow.com/questions/50903106/how-to-add-image-in-flutter