Flutter 강좌 - [Image] 이미지 페이드인(Fade in) 효과 & 플래이스홀더(placeholder) 효과 사용법

Flutter 강좌 목록 : https://here4you.tistory.com/120

 

 

지난 강좌에서는 Image.network() 위젯을 이용해서 온라인 이미지를 스크린에 출력하는 방법에 대해서 알아봤다. 그런데 온라인상에서 이미지를 다운로드를 할 때 일정시간이 소요되고 이 시간동안 스크린에는 아무것도 출력되지 않는다. 이는 UX 적으로 적절하지 못하다. 

해결방법으로는 이미지가 준비되어 출력될 때 까지 이미지를 대신할 뭔가를 사용자에게 보여서 앱이 바쁘게 준비중임을 알리면 된다.

우선 실행화면을 살펴보자. 이미지가 출력되기 전에 둥그란 모양의 프로그레스 인디케이터를 출력하여, 조만간 뭔가가 출력될 것이라는 것을 사용자에게 알릴 수 있다. 또한 페이드인(Fade-in) 효과로 이미지가 서서히 나타나는 효과를 보여준 후 준비된 이미지가 표시된다.

 

소스코드는 다음과 같다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'Fade in images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(title: Text(title)),
        body: Stack(
          children: <Widget>[
            Center(child: CircularProgressIndicator()),
            Center(
              // FadeInImage 등록
              child: FadeInImage(
                  // placeholder는 메모리에 있는 것을 사용
                  placeholder: MemoryImage(kTransparentImage),
                  // image는 네트워크에 있는 이미지를 다운로드
                  image: NetworkImage('https://picsum.photos/250?image=10')),

              // 아래와 같이 사용할 수도 있다.
              // memoryNetwork은 placeholder는 메모리의 것을, 이미지는 network의 것을 사용하느는 의미
              // child: FadeInImage.memoryNetwork(
              //    placeholder: kTransparentImage,
              //    image: 'https://picsum.photos/250?image=10'),
            )
          ],
        ),
      ),
    );
  }
}

 

Scaffold에 Stack 위젯을 등록하였다. Stack의 첫번째 자식으로 CircularProgressIndicator가 등록되었다. 앱이 실행되면 동그라미가 회전하는 애니메이션이 나타나게 된다.

Stack의 두번째 자식은 FadeInImage 위젯이다. 

FadeInImage 위젯은 말그대로 Fade-in 효과를 가지는 이미지를 출력하는 위젯이다. 이미지가 바로 출력되는 것이 아니라 서서히 나타나게 된다.

FadeInImage의 placeholder 항목에는 이미지를 출력할 때 나타날 fade-in 효과를 설정할 수 있다. 위의 소스에서는 MemoryImage(kTransparentImage) 로 설정하였는데 메모리(Flutter package)에 등록된 kTransparentImage 효과로 페이드인 한다는 의미이다.

image 항목에서는 NetworkImage 함수가 사용되는데 온라인상에 URL에 해당하는 이미지를 다운로드해서 출력한다는 의미이다.

다시 정리하면, 앱이 실행되면 첫번째 자식인 CircularProgressIndicator가 화면 중앙에 표시되고, URL에 해당하는 이미지의 다운로드가 실행된다. 이미지가 다운로드되면 kTransparentImage 페이드인 효과가 발생한 후 최종적으로 이미지가 출력되게 된다.

kTransparentImage 효과는 Flutter 기본 패키지가 아닌 외부 패키지에 포함된 효과이므로 사용을 위해서는 pubspec.yaml 파일의 dependencies 항목에 추가해야 한다.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  transparent_image: ^1.0.0

 

추가로 커스텀 애니메이션 GIF 파일을 이용하여 placeholder를 꾸미고 싶다면, MemoryImage가 아닌 AssetImage로 구현하면 된다.

 

---

Flutter Code Examples 강좌를 추천합니다.

• 제 블로그에서 Flutter Code Examples 프로젝트를 시작합니다.
• Flutter의 다양한 예제를 소스코드와 실행화면으로 제공합니다.
• 또한 모든 예제는 Flutter Code Examples 앱을 통해 테스트 가능합니다.

Flutter Code Examples 강좌로 메뉴로 이동

Flutter Code Examples 강좌 목록 페이지로 이동

Flutter Code Examples 앱 설치 | Google Play Store로 이동

Flutter Code Examples - Google Play 앱