본문 바로가기
Flutter

Uploading Image to Firebase Storage in Flutter (Android & iOS)

by kage2k 2021. 6. 26.
728x90
반응형

 

Uploading Image to Firebase Storage in Flutter (Android & iOS)

 

  1. 사전에 firebase연결이 이루어져야한다.
    android, ios, 사용자가 테스팅 하고 싶은 디바이스로
  2. pubspec.yaml에 팩키지 넣기
    사용된 버전
image_picker: ^0.8.0+4
firebase_auth: ^1.4.1
firebase_core: ^1.3.0
cloud_firestore: ^2.2.2
firebase_storage: ^8.1.3
  1. ios에서 사용하기위해서는 권한을 얻어야한다.
    Info.plist
<key>NSCameraUsageDescription</key>
<string>Need to access your camera to capture a photo add and update profile picture.</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>Need to access your photo library to select a photo add and update profile picture</string>
  1. UI는 사용자가 원하는대로 만든다.
  2. 아래의 코드는 참조용
File _image;
final picker = ImagePicker();

// 갤러리에서 사진 가져오기
Future _getImage() async {
  final pickedFile = await picker.getImage(
      source: ImageSource.gallery, maxWidth: 650, maxHeight: 100);
  // 사진의 크기를 지정 650*100 이유: firebase는 유료이다.
  setState(() {
    _image = File(pickedFile.path);
  });
}

onPressed:(){
  _uploadFile(context)
}


Future _uploadFile(BuildContext context) async {
  try {
    // 스토리지에 업로드할 파일 경로
    final firebaseStorageRef = FirebaseStorage.instance
        .ref()
        .child('post')   //'post'라는 folder를 만들고 
        .child('${DateTime.now().millisecondsSinceEpoch}.png');

    // 파일 업로드
    final uploadTask = firebaseStorageRef.putFile(
        _image, SettableMetadata(contentType: 'image/png'));

    // 완료까지 기다림
    await uploadTask.whenComplete(() => null);

    // 업로드 완료 후 url
    final downloadUrl = await firebaseStorageRef.getDownloadURL();

    // 문서 작성
    await FirebaseFirestore.instance.collection('post').add({
      'contents': textEditingController.text,
      'displayName': widget.user.displayName,
      'email': widget.user.email,
      'photoUrl': downloadUrl,
      'userPhotoUrl': widget.user.photoURL
    });
  } catch (e) {
    print(e);
  }

  // 완료 후 앞 화면으로 이동
  Navigator.pop(context);
}

 


 

End
⊙^⊙ Thank For Reading | Happy Coding ⊙-⊙

Setapp on Mac invite link flutterkage2k

The referrer gets a free month, up to a maximum of six months, for each friend who creates an account and signs in on their Mac.

Setapp_Logo.png

도움이 되셨다면, 커피 한잔 사주세요

buymeacoffee.png

300x250
반응형