[flutter] 플러터 LinearLoader와 함께 사용하는 이미지 로딩 방법

11 Dec 2023

flutter

플러터 앱을 개발하다보면 이미지 로딩 시간이 오래 걸리는 경우가 있습니다. 사용자 경험을 향상시키고자, 플러터 프레임워크에서 제공하는 LinearLoader와 함께 이미지를 로딩하는 방법에 대해 알아보겠습니다.

LinearLoader란?

LinearLoader는 사용자에게 로딩되는 상태를 시각적으로 표현하기 위해 주로 사용되는 위젯입니다. LinearLoader를 사용하면 사용자에게 작업이 진행 중임을 알리고, 작업이 완료될 때까지 기다리는 시간에 대한 집중도를 높일 수 있습니다.

이미지 로딩 방법

import 'package:flutter/material.dart';

class ImageWithLoader extends StatefulWidget {
  final String imageUrl;

  ImageWithLoader(this.imageUrl);

  @override
  _ImageWithLoaderState createState() => _ImageWithLoaderState();
}

class _ImageWithLoaderState extends State<ImageWithLoader> {
  bool _loading = true;

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Image.network(widget.imageUrl,
          // Placeholder image while loading
          loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
            if (loadingProgress == null)
              return child;
            return Center(
              child: CircularProgressIndicator(
                value: loadingProgress.expectedTotalBytes != null
                    ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
                    : null,
              ),
            );
          },
          // Set _loading state to false when image is loaded
          frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) {
            if(_loading) {
              _loading = false;
            }
            return child;
          },
          errorBuilder: (BuildContext context, Object exception, StackTrace stackTrace) {
            return Center(
              child: Text('Failed to load image'),
            );
          },
        ),
        Visibility(
          visible: _loading,
          child: CircularProgressIndicator(),
        ),
      ],
    );
  }
}

이미지를 로딩하는 동안 CircularProgressIndicator를 사용하여 LinearLoader를 표현하고, 이미지가 로딩되면 CircularProgressIndicator를 숨기는 방식으로 구현되었습니다.

위와 같은 방법으로 LinearLoader와 함께 이미지를 로딩할 수 있습니다. 이를 통해 이미지 로딩 시간을 시각적으로 표현함으로써 사용자들의 경험을 향상시킬 수 있습니다.

참고 자료: Flutter 공식 문서 - Image 클래스