[Flutter] 폰에서 이미지 갖다쓰기

설정

image_picker 설치

dependencies:
  image_picker: ^1.1.2

ios/Runner/Info.plist

<key>NSPhotoLibraryUsageDescription</key>
<string>사진첩점 쓸게요</string>
<key>NSCameraUsageDescription</key>
<string>카메라점 쓸게요</string>
<key>NSMicrophoneUsageDescription</key>
<string>마이크점 쓸게요</string>

이런 걸 <dict> 밑에 넣는다.
사용자에게 허락 팝업 띄울 때 보이는 문구다.

main.dart

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

활용

이미지 업로드 버튼을 누른 사용자에게
접근 권한 요청 팝업을 띄우고 갖다쓴다 정도의 시나리오로 가보자

그전에 안드로이드 미리보기를 하면 카메라로 사진을 찍을수가 있음
녹색사람이 까불까불하는데 냅다 찍어서 갤러리에 사진 저장해두기

일단 기본 사용법

사진 말고 카메라 띄우려면 ImageSource.camera
이미지 말고 비디오 고르려면 picker.pickVideo()
여러 이미지 고르려면 picker.pickMultiImage()

IconButton(
  onPressed: () async {
    var picker = ImagePicker();
    var image = await picker.pickImage(source: ImageSource.gallery);
  },
  icon: Icon(Icons.add_box_outlined, size: 35),
),

이렇게 하면 고른 이미지가 image 변수에 저장되고
이걸 자유롭게 갖다 쓰기 위해 state(var userImage;) 하나 생성

setState() {userImage = File(image.path)}

요때 주의할 점 사용자가 이미지를 고르지 않았을 수 있으니 null 체크하기

파일 형식으로 이미지 띄우는 법

Image.asset은 asset 폴더에 있는 이미지 띄울 때
Image.network는 넷상 이미지 띄울 때
Image.file은 파일 경로로 이미지 띄울 때 사용

참고

photofilters

인스타 보면 게시물 올릴 때 필터 넣은거 보여주는 그거 만들 때 활용

노란 과속방지턱같은거

레이아웃 깨질 때 보이는거

resizeToAvoidBottomInset 써보거나
위젯을 아예 새 페이지로 분리해보거나
이미지 크기를 조절해보거나
스크롤바 넣어서 해결해보기

전체 예시 코드

IconButton(
  onPressed: () async {
    var picker = ImagePicker();
    var image = await picker.pickImage(source: ImageSource.gallery);
    if (image != null) {
      setState(() {
        userImage = File(image.path);
      });
    }
    
    Navigator.push(
      context,
      MaterialPageRoute(builder: (c) => Upload(userImage: userImage)),
    );
  icon: Icon(Icons.add_box_outlined, size: 35),
),