[Flutter/ImagePicker] Image_picker로 갤러리에서 사진 한 장 불러오기

https://pub.dev/packages/image_picker
Image_Picker 문서를 확인해보고 시작하자

pubspec.yaml

dependencies:
  image_picker: ^1.0.4 // 최신 버전을 확인하세요

기본 설정

   <key>NSCameraUsageDescription</key>
   <string>Used to demonstrate image picker plugin</string>
   <key>NSMicrophoneUsageDescription</key>
   <string>Used to capture audio for image picker plugin</string>
   <key>NSPhotoLibraryUsageDescription</key>
   <string>Used to demonstrate image picker plugin</string>

ios / runner / Info.plist 파일에 위 코드를 입력해서 iOS에서도 구동이 가능하게 한다 (dict 사이)

이미지를 한 장 불러와서 사용하는 것이 목적이기 때문에 이를 중점적으로 다룰 것이다

기능 구현

final ImagePicker _picker = ImagePicker();
final XFile? image = await _picker.pickImage(source: imageSource.gallery);

이미지 한 장을 갤러리에서 불러오는 코드이다
imageSource 를 camera 로 바꿔주면 카메라 촬영으로 이미지를 불러온다


불러온 이미지는 XFile 타입이며

Image.file(
  File(image.path),
)

불러온 이미지를 불러오기 위해서는 path를 이용한다
여기서 File은 import 'dart:io 를 해줘야 사용이 가능하다


만약 CircleAvatar에서 background image로 사용해야한다면 위에 .image를 붙여서 사용해야한다
몰라서 따로 찾아봄...ㅜ

Image.file(
  File(image.path),
).image

이런식으로 뒷 부분에 .image를 붙여줘야 합니다

프로젝트 적용

기본 선언

XFile? _image;
final ImagePicker _picker = ImagePicker();

이미지 가져오는 함수

Future<void> _getImage(ImageSource imageSource) async {
    final XFile? pickedImage = await _picker.pickImage(source: imageSource);

    if (pickedImage != null) {
      setState(() {
        _image = XFile(pickedFile.path); //가져온 이미지를 _image에 저장
      });
    }
}

image 표시

CircleAvatar(
	radius: 60,
	backgroundColor: darkGray,
	backgroundImage: Image.file(
		File(_image.path),
		fit: BoxFit.cover,
	).image,
)

실제로 프로젝트에 적용해보면 이런식으로 코드를 작성했다