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

1775 단어 dartmobileflutter

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 😀.
    );
    

    좋은 웹페이지 즐겨찾기