Colin's Blog
[flutter] 플러터로 Firebase Storage에 저장된 이미지의 크기를 조정하는 방법

Firebase Storage는 이미지 및 기타 파일을 저장하기에 좋은 옵션을 제공합니다. 그러나 사용자 경험을 향상시키기 위해 Firebase Storage에 업로드된 이미지의 크기를 조정할 필요가 있을 수 있습니다. 플러터(Flutter) 앱에서 Firebase Storage에 저장된 이미지의 크기를 조정하는 방법을 알아보겠습니다.

1. firebase_storage 패키지 추가

먼저, 플러터 앱에 firebase_storage 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_storage: ^15.0.0

의존성을 추가한 후에는 터미널에서 flutter pub get 명령어를 사용하여 패키지를 가져와야 합니다.

2. 이미지 다운로드 및 크기 조정

이미지를 Firebase Storage로부터 다운로드하고 크기를 조정하기 위해서는 firebase_storage 패키지의 FirebaseStorage 클래스를 사용해야 합니다. 다음은 Firebase Storage에서 이미지를 다운로드하고 크기를 조정하는 예제 코드입니다.

import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/widgets.dart';

Future<Widget> downloadAndResizeImage(String imageUrl, double width, double height) async {
  final ref = FirebaseStorage.instance.ref().child(imageUrl);
  final url = await ref.getDownloadURL();

  final response = await get(url);
  final imageData = response.bodyBytes;

  final image = Image.memory(
    imageData,
    width: width,
    height: height,
    fit: BoxFit.cover,
  );

  return image;
}

위 코드에서 downloadAndResizeImage 함수는 Firebase Storage에서 이미지를 다운로드하고 원하는 크기에 맞게 조정한 뒤 Image 위젯으로 반환합니다.

3. 이미지 다운로드 및 표시

마지막으로, 위에서 정의한 downloadAndResizeImage 함수를 사용하여 이미지를 다운로드하고 화면에 표시해야 합니다. 다음은 이미지를 다운로드하고 표시하는 예제 코드입니다.

class ResizedImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: downloadAndResizeImage('images/image1.jpg', 200, 200),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          return snapshot.data;
        } else if (snapshot.hasError) {
          return Text('Error');
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

FutureBuilder 위젯을 사용하여 비동기적으로 이미지를 다운로드하고, 다운로드가 완료되면 이미지를 화면에 표시합니다.

이제 플러터 앱에서 Firebase Storage에 저장된 이미지의 크기를 조정하는 방법을 알게 되었습니다. 사용자의 데이터 소비를 줄이고, 더 나은 사용자 경험을 제공할 수 있도록 이미지 크기를 조정하여 원활한 앱 환경을 조성할 수 있습니다.

참고문헌:

© 2018 Colin. All rights reserved.