[Flutter] 인스타그램 클론(6) - 갤러리 사진 불러오기

이번 포스팅에서는 지난 Create Page에서 포스트를 하기 위한 입력 중 하나인 이미지 파일을 갤러리에서 불러오는 작업을 해 보겠습니다.

 

2020/08/09 - [프로젝트/[Flutter] 인스타그램 클론] - [Flutter] 인스타그램 클론(5) - Create Page UI 작성

[Flutter] 인스타그램 클론(5) - Create Page UI 작성

 

Flutter의 특성인지는 몰라도 안드로이드와 iOS를 모두 지원하기 위해, 외부 패키지의 관리는 pubspec.yaml에서 하게 됩니다.

갤러리에서 사진을 불러오기 위해서도 다트에서 구현된 패키지를 가져와서 사용해야 하는데 그 패키지의 이름이 Image Picker입니다.

 

 

 Image Picker의 정보는 아래 링크에서 확인하실 수 있습니다.

https://pub.dev/packages/image_picker

image_picker | Flutter Package

 

<1. pubspec.yaml 수정하기>

플러터에서 외부 라이브러리를 활용을 위해서는 pubspec.yaml 이라는 파일에 추가를 해 주어야 합니다.

 

 

 

 

<2. 패키지 가져오기>

우측 상단에 표시한 Pub Get을 눌러주면 패키지를 가져오는데, Error가 발생하였습니다.

 

제가 듣던 강의와 버튼이나 버튼의 메시지도 달랐고, Error 및 활용하는 외부 패키지의 버전도 달라서 아래의 해결 과정을 거쳤습니다.

 

 

 

<3. Error1>

플러터 SDK 버전에 관한 Error가 나서 버전을 수정하여 맞춰보았습니다.

 

 

 

 

 

이미지 4 ~ 10은 플러터 콘솔에서 플러터 SDK를 업그래이드 하며 나온 이미지들입니다. 간단히 5번의 명령인 플러터 업그레이드를 하신 뒤 11번째 이미지로 이동하셔서 작업을 하셔도 됩니다.

 

간단한 요약을 위해 플러터 업그래이드는 아래의 파일로 요약을 합니다.

 

 

 

<플러터 업그래이드 과정 - 요약>

 

 

 

 

 

 

 

 

 

 

 

<4. 오랜만에 플러터 콘솔>

그리고 플러터 콘솔에 플러터 SDK 업그레이드 명령을 실행하기 위해 콘솔을 열었습니다.

 

 

 

 

<5. 플러터 SDK 업그레이드>

플러터 콘솔에 flutter upgrade라는 명령을 날려서 작업을 합니다.

 

 

 

<6. 플러터 SDK 업그레이드 2>

 

 

 

 

 

<7. 플러터 SDK 업그레이드 3>

 

 

 

 

 

 

<8. 플러터 SDK 업그레이드 4>

 

 

 

 

 

 

<9. 플러터 SDK 업그레이드 5>

 

 

 

<10. 플러터 SDK 업그레이드 6>

 

 

 

<11. 패키지 가져오기 2>

업그레이드 이후에 이미지 피커를 검색하여, 현재(2020.08.10) 기준의 최신 버전을 적어주었습니다.

 

pubspec.yaml 수정한 이후에는 핫 리로드가 아니라 다시 디버깅을 해서 수정을 해야 합니다.

 

 

 

 

<12. 임포트>

소스에 이미지 피커를 사용하기 위한 임포트 작업을 진행하였습니다. 

이미지 피커에서 골라온 사진을 파일로 활용하기 위해서 dart.io도 추가하였습니다.

 

 

 

<13. 빌드 중 뭔가 걸려>

빌드 중 위와 같은 문제가 발생하였지만 정상적으로 빌드는 되었습니다.

 

 

 

 

 

<14. 안드로이드 버전 맞춰주기>

 

왼쪽의 프토 젝트 트리 구조에서 android > app > build.gradle을 열어 위와 같이 최소 android SDK version과 Target SDK Version을 설정해줍니다.

 

저는 각 값을 아래와 같이 설정하였습니다.

 

minSdkVersion 21
targetSdkVersion 28

 

 

 

 

<15. 갤러리에서 가져온 사진으로 포스트에 보여주기>

이미지가 있는지 없는지 여부를 가지고 Text를 보여줄지, 가져온 이미지를 표시할지를 결정하는 소스와

그 아래에 이미지를 가져오는 소스입니다.

 

 

 

위의 소스까지 작성을 하고 실행을 해 봤습니다.

 

 

<16. 갤러리 이미지 고르기>

Create Page에서 버튼을 누르면 갤러리에서 이미지를 위와 같이 선택할 수 있습니다.

 

 

 

 

 

 

<17. 고른 이미지 선택됨>

선택한 이미지가 Create Page에 표시되었습니다.

 

여기서 글씨를 입력하려고 하면 스마트폰의 가상 키보드가 올라오면서 Error가 발생할 수 있는데 그 경우 아래의 소스를 추가하여 해결을 할 수 있습니다.

 

 

 

 

 

 

<18. 화면 스크롤이 안돼서 생기는 error해결>

위의 SingleChildScrollView로 _buildBody의 결과 반환 값을 감싸줍니다.

 

  

이상으로 오늘의 갤러리 이미지 불러오는 포스팅은 마무리를 하며, 다음 포스팅으로는 Login Page를 디자인 하는 포스팅입니다. 해당 포스팅은 아래에서 확인하실 수 있습니다.

 

 

2020/08/23 - [프로젝트/[Flutter] 인스타그램 클론] - [Flutter] 인스타그램 클론(7) - Login Page UI 작성