반응형

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 

 

반응형

진행해본 결과물을 기록 및 공유하는 공간입니다.
잘못된 부분이나 개선점을 알려주시면 반영하겠습니다.


소스코드 복사시 하단에 있는 앵커 광고의 왼쪽 위를 클릭하여 닫은 후 해야 합니다.


문제가 생기면 포스트와 바뀐 환경이 있나 먼저 확인해보세요.
질문을 남겨주면 가능한 빨리 답변드립니다.


제가 쓴 책도 한번 검토해보세요 ^^

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

TistoryWhaleSkin3.4">