이미지 로딩 시간 동안 사용자 경험을 향상시키는 것은 많은 개발자들에게 중요한 과제입니다. Flutter에서는 이를 위해 flutter_blurhash 라이브러리를 사용할 수 있습니다. 이번 글에서는 flutter_blurhash 라이브러리를 사용하여 이미지 로드 시 블러된 플레이스홀더를 표시하는 방법을 소개하겠습니다.
flutter_blurhash란?
flutter_blurhash는 Flutter 애플리케이션에서 BlurHash 알고리즘을 사용할 수 있게 해주는 Dart 패키지입니다. BlurHash는 이미지의 작은 문자열 표현으로, 이미지가 로드되는 동안 블러된 버전을 표시하는 데 사용됩니다. 이를 통해 사용자는 로딩 중인 이미지를 미리 볼 수 있으며, 레이아웃 이동이 줄어듭니다.
시작하기
1. 의존성 추가
먼저, flutter_blurhash 패키지를 프로젝트에 추가합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:
dependencies:
flutter:
sdk: flutter
flutter_blurhash: ^x.x.x그런 다음, 패키지를 설치합니다:
flutter pub get- 사용법
flutter_blurhash를 사용하는 방법은 매우 간단합니다. 기본적인 사용법을 알아보겠습니다.
아래는 BlurHash 위젯을 사용하는 예제입니다:
import 'package:flutter/material.dart';
import 'package:flutter_blurhash/flutter_blurhash.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter BlurHash Example'),
),
body: Center(
child: BlurHash(
hash: 'LEHV6nWB2yk8pyo0adR*.7kCMdnj',
image: 'https://example.com/image.jpg',
duration: Duration(seconds: 1),
),
),
),
);
}
}- BlurHash 설명
미리 생성된 해쉬값을 통해 이미지의 대략적인 크기와 정보를 가지고 이미지가 로드될 위치를 미리 표시해주, 이미지가 로드될때까지 블러처리 된 상태로 이미지가 표시 되게 됩니다. 그럼 자세한 사용 방법을 파악해 보겠습니다.
BlurHash(
hash: 'your_generated_blurhash_string',
image: 'https://example.com/image.jpg',
duration: Duration(seconds: 1),
)hash: BlurHash 문자열로, 블러된 플레이스홀더를 나타냅니다. 이 문자열은 미리 생성된 것이어야 합니다.
image: 로드할 이미지의 URL입니다.
duration: 이미지가 로드될 때 페이드 인 애니메이션의 지속 시간입니다.
- BlurHash 생성하기
아마 위에까지 보다 보면 어떻게 BlurHash를 생성하는 방법에 대해 의문이 들었을 텐데요. BlurHash 문자열은 다양한 도구와 라이브러리를 사용하여 생성할 수 있습니다. 우선 플러터에서 생성하는 방법은 아래와 같습니다.
import 'dart:io';
import 'package:blurhash_dart/blurhash_dart.dart';
void main() {
File imageFile = File('path_to_your_image.jpg');
List<int> imageBytes = imageFile.readAsBytesSync();
String blurHash = BlurHash.encode(imageBytes, 4, 3);
print(blurHash);
}위 처럼 blurHash를 생성하고 이미지를 업로드할때 같이 로드 해준다면 이미지를 불러올 때 보다 더 자연스러워 보이겠죠!ㅎㅎ
다른 언어에서도 생성할수 있는데 JavaScript를 사용하여 BlurHash를 생성하는 방법을 살펴보겠습니다.
import { encode } from 'blurhash'
import Jimp from 'jimp'
async function generateBlurHash(imagePath) {
const image = await Jimp.read(imagePath)
const width = image.bitmap.width
const height = image.bitmap.height
const pixels = []
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const { r, g, b, a } = Jimp.intToRGBA(image.getPixelColor(x, y))
pixels.push(r, g, b, a)
}
}
const blurHash = encode(new Uint8ClampedArray(pixels), width, height, 4, 3)
return blurHash
}
generateBlurHash('path_to_your_image.jpg').then(console.log)결론
flutter_blurhash 라이브러리를 사용하면 Flutter 애플리케이션에서 이미지 로드 경험을 크게 향상시킬 수 있습니다. 블러된 플레이스홀더는 사용자가 이미지를 로드하는 동안 무엇을 기대할 수 있는지 미리 보여주며, 로딩 시간 동안 레이아웃 이동을 줄여줍니다. 이 블로그 글을 통해 flutter_blurhash를 사용하는 방법을 배웠기를 바라며, 여러분의 애플리케이션에 이를 적용해 보세요.
