플러터 폰에 저장된 이미지 가져오려면 image_picker 설치, 사용

image_picker 설치와 셋팅

 

폰의 사진파일 가져다쓸 땐 요즘은 허락받을 필요 없습니다. 그냥 쓸 수 있습니다.

 

1. pubspec.yaml 파일 열고 

dependencies:
  image_picker: ^0.8.4+4

image_picker 추가하고 pub get 누르면 됩니다.

 

 

 

2. ios/Runner/Info.plist 파일 열고

<key>NSPhotoLibraryUsageDescription</key>
<string>사진첩좀 써도 됩니까</string>
<key>NSCameraUsageDescription</key>
<string>카메라좀 써도 됩니까</string>
<key>NSMicrophoneUsageDescription</key>
<string>마이크 권한좀 제발</string>

이런 코드를 <dict> 하단에 추가하면 됩니다. 

사용자에게 허락팝업 띄울 때 보이는 글자들입니다. 

 

 

3. dart파일 맨 위에 

import 'package:image_picker/image_picker.dart';
import 'dart:io';

추가하면 됩니다. 

둘째는 파일 다루는 유용한 함수가 들어있는 기본 패키지입니다. 

 

 

 

 

 

image_picker 사용법

 

AppBar 우측 버튼에 이렇게 코드를 짜봤습니다. 

onPressed: () async {
  var picker = ImagePicker();
  var image = await picker.pickImage(source: ImageSource.gallery);
}

저거 2줄 사용하면 이미지 선택화면이 뜹니다. 

저장된 사진이 없으면 폰으로 사진 몇장 찍어보십시오 

 

picker.pickImage(source: ImageSource.camera);

이러면 사진선택하는 갤러리 말고 카메라를 띄워줍니다.

picker.pickVideo(source: ImageSource.gallery);

이러면 비디오 선택화면이 뜹니다. 

picker.pickMultiImage(source: ImageSource.gallery);

이러면 여러 이미지 선택이 가능합니다. 

 

- 고른 이미지 사이즈, 화질 조정도 가능합니다. 

- photofilters 이런 패키지 설치하면 이미지에 필터도 씌울 수 있습니다.

 

 

 

 

 

선택한 이미지 다루기

 

이미지는 용량이 크기 떄문에 

이미지를 변수에 저장해놓고 쓰는게 아니라 

이미지의 경로만 가져와서 변수에 저장하고 쓰는게 일반적입니다.

 

 

 

onPressed: () async {
  var picker = ImagePicker();
  var image = await picker.pickImage(source: ImageSource.gallery);
   if (image != null) {
    setState((){
      userImage = File(image.path);
    });
  }
  
}

그래서 상단에 var userImage 이런 state 하나 만들고

거기 저장하라고 했습니다. 선택 안하면 null 일까봐 if문으로 체크도 좀 해줬습니다.

근데 이걸 실제 위젯같은 곳에 보여주려면 어떻게 코드를 짜야하냐면 

 

 

 

 

선택한 이미지를 위젯으로 보여주려면

 

Image.file(userImage) 이렇게 쓰면 보입니다.

이미지 파일경로를 넣으면 이미지로 보여주는 위젯입니다. 

Upload() 위젯안에 저걸 써서 보여주도록 합시다.

근데 userImage 이 변수는 MyApp() 위젯 안에 있네요?

 

 

 

그럼 MyApp -> Upload 이렇게 변수를 보내면 됩니다. 

보내고 Image.file(userImage) 이거 쓰면 이제 진짜로 보임