플러터에서 파이어베이스 스토리지 사용하기 위한 CRUD: 초보자 가이드

Firebase Storage는 플러터 앱에서 이미지, 동영상, 오디오 파일 등 다양한 종류의 데이터를 저장하고 관리하는 데 사용할 수 있는 강력한 서비스입니다.

이 블로그 글에서는 초보자 개발자를 위해 플러터 앱에서 파이어베이스 스토리지를 사용하여 CRUD(Create, Read, Update, Delete) 작업을 수행하는 방법을 자세히 안내합니다.

 

1. 프로젝트 설정

1. Firebase 콘솔에 접속하여 새로운 프로젝트를 생성하거나 기존 프로젝트를 선택합니다.
2. 왼쪽 메뉴에서 Storage 탭을 선택하고 시작 버튼을 클릭합니다.
3. Cloud Storage 탭에서 규칙 탭으로 이동하여 필요한 읽기 및 쓰기 권한을 설정합니다.

2. 플러터 앱에 Firebase SDK 추가

1. pubspec.yaml 파일에 다음 종속성을 추가합니다.

dependencies:
  firebase_core: ^1.12.0
  firebase_storage: ^10.3.1

 

1. 터미널에서 다음 명령을 실행하여 종속성을 설치합니다.

flutter pub get

 

1. main.dart 파일에 다음 코드를 추가하여 Firebase SDK를 초기화합니다.

import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

 

3. 저장소 인스턴스 가져오기

// Firebase Storage 인스턴스 가져오기
final FirebaseStorage storage = FirebaseStorage.instance;

 

4. CRUD 작업 수행

 

4.1 파일 업로드 (Create)

// 파일 업로드 함수
Future<void> uploadFile(String filePath, String fileName) async {
  try {
    // 저장소 참조 가져오기
    final storageRef = storage.ref().child(fileName);

    // 파일에 대한 참조 가져오기
    final file = File(filePath);

    // 파일 업로드
    await storageRef.putFile(file);
  } on FirebaseException catch (e) {
    // 에러 처리
    print('파일 업로드 오류: ${e.message}');
  }
}

 

4.2 파일 다운로드 (Read)

// 파일 다운로드 함수
Future<void> downloadFile(String fileName, String localPath) async {
  try {
    // 저장소 참조 가져오기
    final storageRef = storage.ref().child(fileName);

    // 파일 다운로드
    final file = File(localPath);
    await storageRef.downloadToFile(file);
  } on FirebaseException catch (e) {
    // 에러 처리
    print('파일 다운로드 오류: ${e.message}');
  }
}

 

4.3 파일 업데이트 (Update)

// 파일 업데이트 함수
Future<void> updateFile(String filePath, String fileName) async {
  try {
    // 저장소 참조 가져오기
    final storageRef = storage.ref().child(fileName);

    // 파일에 대한 참조 가져오기
    final file = File(filePath);

    // 파일 업데이트
    await storageRef.putFile(file);
  } on FirebaseException catch (e) {
    // 에러 처리
    print('파일 업데이트 오류: ${e.message}');
  }
}

 

4.4 파일 삭제 (Delete)

// 파일 삭제 함수
Future<void> deleteFile(String fileName) async {
  try {
    // 저장소 참조 가져오기
    final storageRef = storage.ref().child(fileName);

    // 파일 삭제
    await storageRef.delete();
  } on FirebaseException catch (e) {
    // 에러 처리
    print('파일 삭제 오류: ${e.message}');
  }
}

 

5. 실제 앱에서 사용하기

 

5.1 사용자 인터페이스 구현

• 파일 업로드, 다운로드, 업데이트, 삭제를 위한 버튼, 이미지 뷰어 등을 UI에 디자인합니다.
• UI에서 발생하는 이벤트를 처리하여 CRUD 작업을 수행하도록 코드를 작성합니다.

5.2 예제: 이미지 업로드 및 표시

1. image_upload_screen.dart 파일을 만들고 다음 코드를 추가합니다.

import 'package:flutter/material.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:image_picker/image_picker.dart';

class ImageUploadScreen extends StatefulWidget {
  @override
  _ImageUploadScreenState createState() => _ImageUploadScreenState();
}

class _ImageUploadScreenState extends State<ImageUploadScreen> {
  File? _pickedImage;
  String _uploadedImageUrl = '';

  // 이미지 선택
  Future<void> _pickImage() async {
    final imagePicker = ImagePicker();
    final pickedImage = await imagePicker.pickImage(source: ImageSource.gallery);
    if (pickedImage != null) {
      setState(() {
        _pickedImage = File(pickedImage.path);
      });
    }
  }

  // 이미지 업로드
  Future<void> _uploadImage() async {
    if (_pickedImage == null) return;

    try {
      final fileName = _pickedImage!.path.split('/').last;
      final storageRef = FirebaseStorage.instance.ref().child('images/$fileName');
      await storageRef.putFile(_pickedImage!);

      setState(() {
        _uploadedImageUrl = await storageRef.getDownloadURL();
      });
    } on FirebaseException catch (e) {
      print('파일 업로드 오류: ${e.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Upload'),
      ),
      body: Column(
        children: [
          if (_pickedImage != null)
            Image.file(_pickedImage!, width: 200, height: 200),
          ElevatedButton(
            onPressed: _pickImage,
            child: Text('Select Image'),
          ),
          ElevatedButton(
            onPressed: _uploadedImageUrl.isEmpty ? _uploadImage : null,
            child: Text('Upload Image'),
          ),
          if (_uploadedImageUrl.isNotEmpty)
            SizedBox(height: 20),
          if (_uploadedImageUrl.isNotEmpty)
            Image.network(_uploadedImageUrl, width: 200, height: 200),
        ],
      ),
    );
  }
}

 

1. main.dart 파일에 다음 코드를 추가하여 ImageUploadScreen을 라우트합니다.

MaterialApp(
  home: ImageUploadScreen(),
);

 

6. 주의 사항

• 파일 업로드 시에는 최대 용량 및 허용 파일 형식을 설정해야 합니다.
• 사용자 인증 및 권한 관리를 통해 데이터 접근을 제어해야 합니다.
• 오류 처리 및 예외 처리를 적절하게 구현해야 합니다.
• 데이터베이스 성능 최적화를 위해 적절한 파일 저장 방식을 사용해야 합니다.

7. 추가 정보

• Firebase Storage 공식 문서: https://firebase.google.com/docs/storage
• Flutter에서 Firebase Storage 사용: https://firebase.google.com/docs/storage/flutter/start

이 블로그 글에서 소개된 내용을 통해 플러터 앱에서 파이어베이스 스토리지 CRUD를 사용하는 방법을 쉽게 이해하셨기를 바랍니다.

더 궁금한 점이나 도움이 필요한 부분이 있으면 언제든지 질문해주세요.

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

Tester Share [테스터쉐어] - Google Play 앱