플러터, flutter) Fire Storage 사용하기

파이어 스토리지를 시작하면 하나의 버킷이 부여된다.

우리는 그 버킷안에서 폴더를 만들고 파일을 넣고 할 수 있다.

프로젝트 하나 당 하나의 버킷을 부여 받을 수 있다.

(돈 주면 더 할 수 있긴 한데, 폴더도 만들 수 있어서 굳이..? 여러개 프로젝트에도 이거 하나면 충분)

 

버킷의 개념, 이해했는가? ㅇㅋ!

 

여기가 버킷의 위치이다.

버킷으로 가는 방법을 코드로 보여주겠다.

 

파이어스토어 sdk를 깐 뒤에. 이렇게 싱글톤을 받고, ref()를 사용하면 된다.

여기부터 이제 어떤 파일을 가져올지, 뭐 등등의 작업등을 지시하면 된다. 더 구체적인 부분들을 살펴보자

 

잠깐, 그전에 규칙부터 잠시 살펴보자

파이어 스토어랑 비슷한 느낌이지 않는가? 맞다 거의 똑같다

대신 collection, documents 대신 bucket과 path가 사용된다.

(참고로 write은 create, update, delect의 기능을 합친 것을 의미한다. write 대신 create을 써두면 생성만 가능함.)

 

이제 진짜 코드를 살펴보자

 

파일 업로드 하는 방법

업로드하는거? 어렵지 않습니다.

일단 맨 윗줄부터 얘기를 해보자면

1) child는 내부적인 폴더나 파일을 지정할 수 있다. 그리고 child이기 때문에 한 단위 들어가는 것을 말한다(유니티의 hieracy 개념)

 

2) user_image 폴더가 없으면 그냥 알아서 만들어진다.

 

3) 우리는 user_image폴더 안에, uid+'jpg' path를 설정했다. 저 메소드는 최종적인 레퍼런스를 반환한다.

 

4) 우리는 그 레퍼런스에 putfile이라는 메소드를 통해 파일을 업로드 할 수 있다.

 

5) 근데 putfile은 task의 개념으로 future와는 약간 다르다. 근데 .onComplete를 붙여주면 future로 바뀌어서

앞에 await를 붙여주고 업로드가 완료된 뒤에 다음 줄로 넘어가도록 하는게 가능하다.

 

파일의 사이즈를 조절하는 방법 

Image Picker의 getImage 파라미터에는 source말고도 사실 더 있다.

그중에 이미지퀄리티와 max height,width의 값을 통해서는 파일의 사이즈를 조절할 수 있다.

 

이미지 퀄리티는 0-100사이의 값으로 설정할 수 있고,

좋은 카메라일수록 해상도가 높다보니 기본적으로 이미지파일의 값이 클것이다,

또한 사이즈를 조절시켜두면, 그 역시 이미지파일의 값과 연관되어 사이즈 조절에 기여할 수 있다.

 

참고로 예시에서는 퀄리티 50에, max width = 150으로 주었더니 약 200kb 되던게 3kb로 줄어버렸다.

 

파일을 다운로드 받는 방법

Firestorage가서 직접 탐색해서 다운받는 그림을 상상했는가? 전혀 그렇지 않다.

우리는 해당 파일의 다운로드 url을 database에 저장해서, 

나중에 해당 파일에 접근하고 싶다면 database에서 url을 꺼내서, Network image를 통해 접근할 것이다.

 

 

여기 코드를 보면 ref.getDownloadURL() 이 있다. url은 Future<dynamic>을 return한다.

실제로 저기 값을 url값인데, 복사해서 브라우저에 띄우면 이미지만 딱 나온다.

네트워크 이미지 위젯에 쓰기에 딱이다.

 

 

 

<참고>

userName도 그렇고, userImageURL도 그렇고 request를 줄이기 위해, 다른 collection에 두번 저장하게 되는데,

심지어 chat collection에는 매 document(메시지) 마다 저장됨.

만약 update가 있으면 이 방법이 썩 좋은 방법이 되지 않을 수 있음. 왜냐면 다 바꿔야 하니까,

하지만 이미지 바꾸는 update 기능이 없으므로 나쁘지 않은 방법임.