Flutter로 자연스러운 이미지 페이드인 효과 구현하기: FadeInImage 사용법

앱에서 이미지를 로딩할 때 사용자 경험을 높이기 위한 중요한 기술 중 하나가 바로 이미지의 페이드인 효과입니다. Flutter에서는 FadeInImage 위젯을 사용하여 네트워크, 로컬, 또는 인메모리 이미지에 간단히 페이드인 효과를 줄 수 있습니다. 이번 글에서는 FadeInImage 위젯을 사용해 로딩 중 이미지를 더 부드럽고 자연스럽게 표시하는 방법을 알아보겠습니다.

참고. Fade in images with a placeholder

FadeInImage 위젯이란?

FadeInImage는 Flutter에서 네트워크나 로컬 이미지가 로딩될 때 이미지가 부드럽게 나타나는 페이드인 효과를 제공하는 위젯입니다. 일반적으로 이미지를 로딩할 때 로딩 중임을 나타내는 플레이스홀더 이미지와 함께 사용하여 사용자에게 시각적인 피드백을 제공할 수 있습니다. 이는 특히 큰 이미지 파일을 로드하거나 네트워크 상태가 불안정할 때 유용하게 사용할 수 있습니다.

FadeInImage의 기본 사용법

1. 네트워크 이미지를 페이드인으로 표시하기

네트워크 이미지 로딩 시 페이드인 효과를 주고 싶다면, FadeInImage.memoryNetwork 생성자를 사용할 수 있습니다. 기본 플레이스홀더 이미지로는 투명한 이미지를 사용하여 화면에 깔끔하게 표시할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fade in images',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Fade in images'),
        ),
        body: Stack(
          children: <Widget>[
            const Center(child: CircularProgressIndicator()),
            Center(
              child: FadeInImage.memoryNetwork(
                placeholder: kTransparentImage,
                image: 'https://picsum.photos/250?image=9',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 kTransparentImage라는 투명 이미지를 플레이스홀더로 사용하여 이미지가 로드되는 동안 자연스럽게 페이드인 효과를 적용합니다. 이 코드는 네트워크 상태에 따라 이미지를 부드럽게 로드하여 사용자 경험을 향상시킬 수 있습니다.

2. 로컬 자산을 사용한 플레이스홀더 적용

네트워크 이미지를 로딩하는 동안 로컬 자산 이미지를 플레이스홀더로 사용할 수도 있습니다. 이를 통해 사용자는 로딩 중인 이미지 대신 간단한 애니메이션이나 로딩 중임을 알리는 이미지를 볼 수 있습니다.

1단계: pubspec.yaml에 로컬 자산 이미지 추가

flutter:
  assets:
    - assets/loading.gif

2단계: FadeInImage.assetNetwork를 사용해 로컬 자산 플레이스홀더 적용

FadeInImage.assetNetwork(
  placeholder: 'assets/loading.gif',
  image: 'https://picsum.photos/250?image=9',
),

위 코드에서는 loading.gif라는 로컬 자산을 플레이스홀더로 사용하여 네트워크 이미지를 로딩하는 동안 자연스럽게 로딩 효과를 줄 수 있습니다.

FadeInImage 사용 시 유의할 점

1. 네트워크 이미지 로딩 시간에 따른 효과

네트워크 상태에 따라 로딩 속도가 달라지므로, 사용자의 네트워크 환경을 고려하여 플레이스홀더 이미지가 너무 오래 보이지 않도록 최적화하는 것이 좋습니다.

2. 캐시와 로딩 시간

Flutter는 이미지 캐시를 기본적으로 지원하므로, 한 번 로드한 이미지는 캐시에 저장됩니다. 반복적으로 사용하는 이미지라면 캐싱을 고려해 로딩 시간을 줄이는 것도 좋은 방법입니다.

---

결론: Flutter에서 자연스러운 이미지 로딩을 위한 FadeInImage 활용

Flutter의 FadeInImage 위젯은 네트워크 또는 로컬 이미지를 자연스럽게 표시하여 사용자가 앱의 로딩 시간을 느끼지 않도록 만드는 데 매우 유용한 도구입니다. 페이드인 효과를 통해 더 나은 사용자 경험을 제공할 수 있으며, 로딩 중 플레이스홀더 이미지를 사용할 수 있는 다양한 옵션을 제공합니다. Flutter 앱 개발에서 자연스러운 UI 구현을 원한다면, FadeInImage 위젯을 적극적으로 활용해 보세요.

 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const title = 'Fade in images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: Center(
          child: FadeInImage.assetNetwork(
            placeholder: 'assets/loading.gif',
            image: 'https://picsum.photos/250?image=9',
          ),
        ),
      ),
    );
  }
}