[flutter] 플러터와 Firebase Storage를 사용하여 썸네일 이미지를 생성하는 방법

08 Dec 2023

flutter

이번 포스트에서는 Flutter 앱에서 Firebase Storage를 사용하여 이미지를 업로드하고, 업로드한 이미지의 썸네일을 생성하는 방법에 대해 알아보겠습니다.

Firebase Storage 설정

먼저, Firebase 콘솔에서 프로젝트를 생성하고, Firebase Storage를 활성화합니다. 이후 프로젝트에 Firebase SDK를 추가하고, 인증 및 권한 설정 작업을 마칩니다.

Flutter 앱에서 이미지 업로드

Flutter 앱에서 이미지를 업로드하려면 firebase_storage 패키지를 사용하여 Firebase Storage와 통신해야 합니다.

import 'package:firebase_storage/firebase_storage.dart';
import 'dart:io';

final storage = FirebaseStorage.instance;

Future<String> uploadImage(File file) async {
  final ref = storage.ref().child('images/${DateTime.now().toString()}');
  UploadTask uploadTask = ref.putFile(file);
  return await (await uploadTask).ref.getDownloadURL();
}

썸네일 이미지 생성

이미지를 업로드한 후에는 업로드한 이미지의 썸네일을 생성해야 합니다. 이를 위해서 image 패키지를 사용하여 이미지를 다루고, 필요한 썸네일 이미지를 생성할 수 있습니다.

import 'package:image/image.dart' as img;
import 'dart:io';

Future<File> generateThumbnail(File file, int width, int height) async {
  img.Image image = img.decodeImage(await file.readAsBytes());
  img.Image thumbnail = img.copyResize(image, width: width, height: height);
  return File('thumbnail.jpg')..writeAsBytesSync(img.encodeJpg(thumbnail));
}

Firebase Storage에 썸네일 이미지 업로드

마지막으로, 생성한 썸네일 이미지를 Firebase Storage에 업로드합니다. 이를 위해 앞서 구현한 이미지 업로드 메서드를 재사용할 수 있습니다.

Future<String> uploadThumbnail(File file) async {
  final ref = storage.ref().child('thumbnails/${DateTime.now().toString()}');
  UploadTask uploadTask = ref.putFile(file);
  return await (await uploadTask).ref.getDownloadURL();
}

마무리

이제 Flutter 앱에서 Firebase Storage를 활용하여 이미지를 업로드하고, 썸네일 이미지를 생성하는 방법에 대해 알아보았습니다. 이러한 기능을 활용하면 앱에서 이미지를 관리하고 보여줄 때 유용하게 활용할 수 있을 것입니다.

이상으로, 플러터와 Firebase Storage를 사용하여 썸네일 이미지를 생성하는 방법에 대해 알아보았습니다. 감사합니다!

firebase_storage 패키지 문서 image 패키지 문서