Flutter에서 프로필 사진과 같은 이미지를 업데이트할 때 URL은 변경되지 않고 이미지만 변경되는 상황이 자주 발생합니다. 이런 경우 브라우저나 Flutter의 이미지 캐시 때문에 업데이트된 이미지를 제대로 반영하지 못하는 문제가 생깁니다.
이 문제를 해결하기 위해 이미지를 강제로 새로 고침하는 방법을 구현할 수 있습니다. 이 글에서는 Flutter에서 URL은 그대로 유지하면서, 이미지를 업데이트하는 가장 간단하고 효과적인 전략을 소개합니다.
문제 상황
이미지 URL은 그대로 유지:
프로필 사진 URL이 변경되지 않더라도, 서버에서 이미지는 업데이트될 수 있습니다. 브라우저나 앱의 캐시는 변경된 이미지를 인식하지 못합니다.
기존 이미지 캐시 문제:
Image.network()는 캐시된 이미지를 불러오기 때문에 변경된 이미지를 확인하려면 추가적인 처리가 필요합니다.
해결 방법
Image.memory와 NetworkAssetBundle을 활용해, URL로부터 이미지 데이터를 직접 가져와 위젯을 업데이트하는 방식을 사용할 수 있습니다. 이렇게 하면 Flutter의 캐시 메커니즘을 우회하여 항상 최신 이미지를 로드할 수 있습니다.
코드 구현
다음은 프로필 이미지를 업데이트하는 Flutter 위젯 코드입니다.
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class ForcePicRefresh extends StatefulWidget {
@override
_ForcePicRefreshState createState() => _ForcePicRefreshState();
}
class _ForcePicRefreshState extends State<ForcePicRefresh> {
// 초기 URL 설정
String url =
'https://www.booths.co.uk/wp-content/uploads/British-Flower-1x1-2-660x371.jpg';
// 이미지 위젯 저장 변수
late Widget _pic;
@override
void initState() {
super.initState();
// 초기 이미지를 설정
_pic = Image.network(url);
}
// 이미지 업데이트 함수
Future<void> _updateImgWidget() async {
// 로딩 인디케이터로 대체
setState(() {
_pic = CircularProgressIndicator();
});
// URL로부터 이미지 데이터 가져오기
Uint8List bytes = (await NetworkAssetBundle(Uri.parse(url)).load(url))
.buffer
.asUint8List();
// 새로운 이미지로 업데이트
setState(() {
_pic = Image.memory(bytes);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Force Image Refresh"),
),
body: Center(
child: InkWell(
// 이미지를 표시
child: _pic,
// 이미지 업데이트 호출
onTap: () {
_updateImgWidget();
},
),
),
);
}
}주요 동작 설명
초기화:
initState에서 Image.network로 초기 이미지를 설정합니다.
이미지 업데이트 (_updateImgWidget):
URL로부터 이미지 데이터를 가져오고, Uint8List로 변환합니다.
Image.memory를 사용해 데이터를 표시하며, Flutter의 캐시를 우회합니다.
로딩 인디케이터 표시:
이미지 로드 중에는 CircularProgressIndicator를 표시해 사용자에게 진행 상태를 알립니다.
UI 구성:
이미지 위젯을 InkWell로 감싸서 클릭 시 이미지가 새로 고침되도록 합니다.
사용 시나리오
프로필 이미지 업데이트:
사용자 프로필 사진이 서버에서 변경되었으나 URL은 그대로인 경우.
이미지 갤러리 업데이트:
이미지 데이터가 자주 변경되는 서비스(예: 상품 갤러리, 이벤트 배너 등).
실행 화면
초기 화면:
URL에서 이미지를 불러와 화면에 표시합니다.
이미지 업데이트 시:
이미지를 클릭하면 로딩 인디케이터가 표시된 후, 서버에서 최신 이미지를 가져옵니다.
왜 이 방법이 합리적인가?
캐시 우회:
Image.network 대신 Image.memory를 사용하여 Flutter의 캐시를 완전히 우회합니다.
단순성과 확장성:
코드가 간결하고, 다른 위젯이나 시나리오에서도 쉽게 재사용할 수 있습니다.
사용자 경험 개선:
로딩 상태를 표시하여 사용자에게 명확한 피드백을 제공합니다.
결론
Flutter에서 URL은 그대로 유지하면서 이미지를 업데이트해야 하는 상황에서, 위의 전략은 가장 단순하고 효과적인 해결책입니다. 특히, 프로필 사진과 같이 URL이 고정된 이미지를 자주 업데이트해야 하는 경우, 이 방법을 적용하면 Flutter의 기본 캐시 문제를 손쉽게 해결할 수 있습니다.
여러분도 프로젝트에서 한번 활용해보세요! 😊
