Flutter 앱에서 Firebase 프로필 이미지를 로컬에 저장해서 빠르게 불러오는 방법

 

✨ 왜 이걸 해야 할까?

Firebase에 프로필 이미지를 저장하면, 매번 인터넷에서 이미지를 받아와야 해서 앱이 느려지기도 해요.
특히 네트워크가 느리거나 없는 환경에서는 이미지가 아예 안 보일 수도 있어요. 

그래서 우리는 이렇게 할 거예요:

✅ 처음에만 Firebase에서 이미지 다운로드
✅ 기기에 로컬로 저장
✅ 다음부터는 로컬에서 빠르게 불러오기
✅ 이미지가 바뀌면 Firebase와 동기화

---

 1. 준비물

🔧 사용 패키지 설치 (pubspec.yaml)

 

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.0.0
  firebase_storage: ^11.0.0
  cloud_firestore: ^4.0.0
  http: ^0.13.0
  path_provider: ^2.0.0

✨ Firebase 초기화도 꼭 해주세요

main.dart에서 다음 코드 추가:

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

---

✅ 2. Firebase에서 이미지 받아서 로컬에 저장하기

📥 함수 만들기: loadProfileImage()

import 'dart:io';
import 'package:path_provider/path_provider.dart';
import 'package:http/http.dart' as http;

/// 프로필 이미지 로컬에 저장하고 반환하는 함수
Future<File> loadProfileImage(String uid, String imageUrl) async {
  // 기기 저장소 경로 불러오기
  final dir = await getApplicationDocumentsDirectory();
  final file = File('${dir.path}/$uid.jpg');

  // 🔸 1. 로컬에 파일이 있으면 그걸 씀
  if (await file.exists()) {
    return file;
  }

  // 🔸 2. 없으면 Firebase에서 받아서 저장
  final response = await http.get(Uri.parse(imageUrl));
  await file.writeAsBytes(response.bodyBytes);
  return file;
}

---

✅ 3. 불러온 이미지 보여주기

👤 프로필 이미지 위젯에 넣기

FutureBuilder<File>(
  future: loadProfileImage(user.uid, user.photoUrl),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done && snapshot.hasData) {
      return CircleAvatar(
        backgroundImage: FileImage(snapshot.data!),
        radius: 40,
      );
    } else {
      return const CircularProgressIndicator(); // 로딩 중
    }
  },
)

---

✅ 4. 새 이미지 업로드하면 로컬에도 저장하기

Future<void> uploadProfileImage(File imageFile, String uid) async {
  final ref = FirebaseStorage.instance.ref().child('profile_images/$uid.jpg');
  await ref.putFile(imageFile);
  final downloadUrl = await ref.getDownloadURL();

  // Firestore에 이미지 URL 저장
  await FirebaseFirestore.instance.collection('users').doc(uid).update({
    'photoUrl': downloadUrl,
  });

  // 로컬에도 저장 (같은 이름으로 덮어쓰기)
  final dir = await getApplicationDocumentsDirectory();
  final file = File('${dir.path}/$uid.jpg');
  await file.writeAsBytes(await imageFile.readAsBytes());
}

 

---

✅ 5. Firebase와 동기화하기 (선택 사항)

• Firestore에 updatedAt 같은 필드를 넣어서
• 이미지가 최신인지 확인하고 다시 받아올 수 있어요.

bool needsSync(DateTime local, DateTime remote) {
  return remote.isAfter(local);
}

---

✅ 정리 요약

단계설명

1	Firebase에서 이미지 다운로드
2	로컬 기기에 저장 (앱 저장소)
3	다음부터는 로컬에서 빠르게 불러오기
4	프로필 이미지 바뀌면 Firebase와 로컬 모두 업데이트

 

---

🧠 초보자를 위한 핵심 포인트

• 📁 getApplicationDocumentsDirectory()는 앱 전용 폴더에 접근하는 방법이에요
• 🔁 http.get()으로 이미지를 받아서 File.writeAsBytes()로 저장해요
• 📷 FileImage()는 로컬 파일을 이미지로 보여주는 방법이에요

---

🏁 마무리

이 방식은 단순하지만 앱 성능을 크게 높여줍니다.
로딩이 빠르고, 데이터 사용량도 줄고, UX도 좋아져요.
Firebase와 로컬을 동시에 쓰는 하이브리드 이미지 관리! 꼭 써보세요.

 

 

째깍째깍...흘러가는 시간 붙잡고 싶다면? 

Study Duck 학습 타이머 즉시 ON! 랭킹 경쟁 참여하고 학습 습관 만들 기회, 놓치지 마세요!

www.studyduck.net

Study Duck팟빵
https://www.podbbang.com/channels/1792491