Flutter 프로젝트에 이미지 선택기 서비스 통합

pubspec.yaml 파일에 이미지 선택기 플러그인을 추가합니다.

프로젝트에 패키지를 추가하는 방법에는 주로 두 가지가 있습니다.

퍼스트 어프로치(롱 어프로치)

pub.dev으로 이동하여 image_picker 0.8.5+3 Link here 을 검색합니다.

설치를 클릭하고 이미지 선택기 버전을 복사합니다. image_picker: ^(현재 버전 번호)

pubspec.yaml 파일로 이동하여 복사한 내용을 종속 항목 아래에 붙여넣고 올바르게 정렬되었는지 확인합니다.

저장을 누르거나 flutter pub get을 실행하여 모든 종속성을 설치합니다.

대체 방법(더 짧은 접근 방식)

터미널로 가서 flutter pub add image_picker를 실행하여 이미지 선택기 플러그인을 프로젝트에 추가합니다. 최대한 간단하게 😀

이미지 선택기 플러그인 구현

클래스의 상태(StatefulWIdget)에서 파일 이미지를 보유할 null 허용 변수를 선언합니다File? imageUrl;. 변수를 null로 만드는 이유를 곧 설명하겠습니다.

이제 이미지 선택기에 대한 함수를 작성해야 합니다.

void selectImage() async {
    final picker = ImagePicker(); //Initialize the image picker service
    final pickedImage = await picker.pickImage();
    if (pickedImage == null) { //Check if the user did not pick any image, then we return.
      return;
    }
   setState((){
     imageUrl = File(pickedImage!.path); //Set imageUrl to the to File of the picked image.
   });
  }

.pickImage() 메서드에는 imageQuality, source 등을 포함하여 설정할 수 있는 몇 가지 속성이 있습니다.

이제 이미지를 표시할 위치로 이동합니다.

Container(
  height: 200,
  width: 200,
  child: FileImage(imageUrl ?? 'any dummy image url here');//This line checks if imageUrl is null, then it displays the dummy image url else it will display your image. This is where the power or dart nullable comes in 😀.
);