[Flutter] 이미지 출력 위젯

 

 1. asset 

 

 - 로컬 이미지 표시

 

 - flutter 프로젝트 안에 assets 폴더를 만들고 그안에 image 폴더를 만든 후 넣고 싶은 이미지 파일을 추가한다.

 

 

 - pubspec.yaml 파일 안에 들어가서 주석 처리된 asset 관련 설정을 다음과 같이 변경한다.

 

 * 경로는 넣고 싶은 이미지 파일을 프로젝트 탐색기에서 우클릭하면 상대경로 복사하기 버튼을 누르면 된다.

 

 

 - image 파일 넣기는 Image.asset('이미지 파일 경로') 를 넣으면 된다. 

 

 *윈도우의 경우 상대경로를 붙여넣으면 \ 한개로 경로표시가 되는데 이것을 \\ 두개로 변경해준다.

 

 

 

 - pubspec.yaml 파일에 asset 부분을 파일로 지정하지 않고 폴더로 지정할 수 도 있다. ( 폴더 내 모든 파일 적용 )

 

 

-만약 이미지의 크기가 화면을 넘어설 때, SingleChildScrollView 를 사용하여 스크롤 바를 추가 할 수 있다.

 

 

 

2. network

 

 - 네트워크 이미지 표시

 

 - 플러터가 파일을 다운로드 해서 캐시에 저장하고 화면에 띄운다.

 

 - asset 보다 로딩이 느리고 인터넷 연결이 필수

 

 - Image.network('인터넷상 이미지 url') 으로 추가할 수 있다.