Flutter의 Firebase Storage 사용법

Firebase Storage는 Firebase에서 제공하는 클라우드 스토리지 서비스로, Flutter 애플리케이션에서 이미지, 동영상, 파일 등의 데이터를 저장하고 관리할 수 있습니다. Firebase Storage를 사용하면 대용량 데이터를 안전하게 저장하고, 이를 쉽게 업로드하고 다운로드할 수 있습니다. 이번 글에서는 Flutter에서 Firebase Storage를 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. Firebase 프로젝트 설정

Firebase Storage를 사용하려면 먼저 Firebase 콘솔에서 프로젝트를 생성하고 설정해야 합니다.

1. Firebase 콘솔에 접속하여 새 프로젝트를 생성합니다.
2. Android 및 iOS 애플리케이션을 Firebase 프로젝트에 추가합니다.
3. Firebase 프로젝트 대시보드에서 "Storage" 섹션으로 이동하여 스토리지를 설정합니다.

2. Firebase 플러그인 설치

Firebase Storage를 Flutter 프로젝트에 통합하려면 firebase_core 및 firebase_storage 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.3.0
  firebase_storage: ^11.0.0
  image_picker: ^0.8.5+3  # 이미지 선택을 위한 패키지

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

3. Firebase 초기화

Firebase를 사용하려면 애플리케이션을 초기화해야 합니다. main.dart 파일에서 Firebase를 초기화합니다.

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Firebase Storage Example')),
      body: Center(
        child: Text('Welcome to Firebase Storage Example!'),
      ),
    );
  }
}

위 코드는 Firebase를 초기화하고 기본 홈 화면을 설정합니다.

4. 이미지 업로드 및 다운로드

이제 이미지를 선택하여 Firebase Storage에 업로드하고, 업로드한 이미지를 다운로드하여 화면에 표시하는 방법을 알아보겠습니다.

 

Step 1: 이미지 선택

이미지 선택을 위해 image_picker 패키지를 사용합니다.

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

class ImagePickerScreen extends StatefulWidget {
  @override
  _ImagePickerScreenState createState() => _ImagePickerScreenState();
}

class _ImagePickerScreenState extends State<ImagePickerScreen> {
  File? _image;
  final ImagePicker _picker = ImagePicker();

  Future<void> _pickImage() async {
    final pickedFile = await _picker.pickImage(source: ImageSource.gallery);

    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image Picker')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _image == null ? Text('No image selected.') : Image.file(_image!),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Pick Image'),
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 사용자가 갤러리에서 이미지를 선택할 수 있도록 합니다. image_picker 패키지를 사용하여 이미지를 선택하고, 선택한 이미지를 화면에 표시합니다.

 

 

반응형

 

 

Step 2: 이미지 업로드

선택한 이미지를 Firebase Storage에 업로드합니다.

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

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

class _ImageUploadScreenState extends State<ImageUploadScreen> {
  File? _image;
  final ImagePicker _picker = ImagePicker();
  final FirebaseStorage _storage = FirebaseStorage.instance;
  String _downloadURL = '';

  Future<void> _pickImage() async {
    final pickedFile = await _picker.pickImage(source: ImageSource.gallery);

    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      }
    });
  }

  Future<void> _uploadImage() async {
    if (_image == null) return;

    try {
      final fileName = _image!.path.split('/').last;
      final ref = _storage.ref().child('uploads/$fileName');
      await ref.putFile(_image!);

      final downloadURL = await ref.getDownloadURL();
      setState(() {
        _downloadURL = downloadURL;
      });
    } catch (e) {
      print('Error uploading image: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image Upload')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _image == null ? Text('No image selected.') : Image.file(_image!),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Pick Image'),
            ),
            ElevatedButton(
              onPressed: _uploadImage,
              child: Text('Upload Image'),
            ),
            _downloadURL.isEmpty
                ? Container()
                : Image.network(_downloadURL),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 사용자가 선택한 이미지를 Firebase Storage에 업로드하고, 업로드한 이미지의 다운로드 URL을 가져와 화면에 표시합니다. putFile 메서드를 사용하여 파일을 업로드하고, getDownloadURL 메서드를 사용하여 업로드한 파일의 다운로드 URL을 가져옵니다.

5. 업로드한 파일 관리

Firebase Storage에 업로드한 파일을 관리할 수 있습니다. 예를 들어, 파일을 삭제하거나 메타데이터를 업데이트할 수 있습니다.

 

파일 삭제

Future<void> _deleteImage(String filePath) async {
  try {
    final ref = _storage.ref().child(filePath);
    await ref.delete();
    setState(() {
      _downloadURL = '';
    });
  } catch (e) {
    print('Error deleting image: $e');
  }
}

 

위 코드는 Firebase Storage에서 파일을 삭제하는 예제입니다. delete 메서드를 사용하여 파일을 삭제할 수 있습니다.

결론

Firebase Storage는 Flutter 애플리케이션에서 대용량 데이터를 안전하게 저장하고 관리할 수 있는 강력한 도구입니다. 이미지를 선택하여 업로드하고, 업로드한 이미지를 다운로드하여 화면에 표시하는 방법을 통해 Firebase Storage의 기본 사용법을 이해할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 Firebase Storage를 효율적으로 사용해보세요. Firebase Storage를 통해 애플리케이션의 기능을 확장하고, 사용자 경험을 향상시킬 수 있습니다.