Flutter의 네트워크 이미지(Network Image) 사용법

Flutter에서는 네트워크에서 이미지를 불러와 화면에 표시할 수 있는 간단하고 효율적인 방법을 제공합니다. 이를 통해 웹 서버나 클라우드에서 호스팅되는 이미지를 실시간으로 불러와 사용할 수 있습니다. 이번 글에서는 Flutter에서 Image.network 위젯을 사용하여 네트워크 이미지를 표시하는 방법과 함께, 성능 최적화 및 로딩 상태 처리 방법을 단계별로 설명하겠습니다.

1. Image.network 사용 기본

Flutter에서 네트워크 이미지를 불러오는 가장 기본적인 방법은 Image.network 위젯을 사용하는 것입니다. 이는 이미지를 네트워크에서 로드하고, 자동으로 화면에 표시해 줍니다.

 

1.1 기본 사용법

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Network Image Example'),
        ),
        body: Center(
          child: Image.network(
            'https://via.placeholder.com/150',  // 네트워크 이미지 URL
          ),
        ),
      ),
    );
  }
}

 

위 코드는 기본적인 Image.network 사용법을 보여줍니다. 네트워크 이미지를 URL로 전달하면, 해당 이미지를 자동으로 불러와 화면에 표시합니다.

2. 이미지 로딩 중 상태 처리

네트워크에서 이미지를 불러오는 동안 사용자에게 로딩 상태를 알려주는 것은 중요한 사용자 경험을 개선하는 방법입니다. Flutter의 Image.network는 loadingBuilder 매개변수를 제공하여 로딩 중인 상태를 커스터마이징할 수 있습니다.

 

2.1 로딩 중 상태 처리

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Network Image with Loading Indicator'),
        ),
        body: Center(
          child: Image.network(
            'https://via.placeholder.com/600',
            loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
              if (loadingProgress == null) {
                return child;  // 로딩 완료 시 이미지를 표시
              } else {
                // 로딩 중일 때 진행률을 표시
                return Center(
                  child: CircularProgressIndicator(
                    value: loadingProgress.expectedTotalBytes != null
                        ? loadingProgress.cumulativeBytesLoaded / (loadingProgress.expectedTotalBytes ?? 1)
                        : null,
                  ),
                );
              }
            },
          ),
        ),
      ),
    );
  }
}

 

loadingBuilder를 사용하여 이미지가 로드되는 동안 CircularProgressIndicator를 표시하고, 로딩이 완료되면 이미지를 표시하는 예제입니다. loadingProgress 매개변수를 사용하여 이미지가 얼마나 로드되었는지 진행률을 확인할 수 있습니다.

 

 

반응형

 

 

3. 에러 처리

네트워크에서 이미지를 불러올 때, 이미지가 없는 경우나 네트워크 연결에 문제가 있을 경우 에러 처리를 해주는 것이 중요합니다. Flutter에서는 errorBuilder 매개변수를 사용하여 이미지 로드 실패 시 대체할 위젯을 지정할 수 있습니다.

 

3.1 에러 처리 예제

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Network Image with Error Handling'),
        ),
        body: Center(
          child: Image.network(
            'https://invalid-url.com/image.jpg',  // 잘못된 URL
            errorBuilder: (BuildContext context, Object error, StackTrace? stackTrace) {
              return Icon(
                Icons.error,  // 에러 발생 시 표시할 아이콘
                size: 50,
                color: Colors.red,
              );
            },
          ),
        ),
      ),
    );
  }
}

 

위 코드에서는 이미지 로딩에 실패했을 때, 에러를 나타내는 아이콘을 표시하는 예제입니다. errorBuilder를 사용하여 네트워크 오류나 잘못된 URL로 인해 이미지를 불러오지 못하는 상황을 처리할 수 있습니다.

4. 이미지 성능 최적화

네트워크 이미지를 사용할 때 성능을 최적화하는 것이 중요합니다. 이를 위해 이미지 크기 조정, 적절한 해상도 선택, 메모리 관리 등의 전략을 사용할 수 있습니다.

 

4.1 이미지 크기 최적화

이미지의 크기를 적절히 설정하여 불필요하게 큰 이미지를 로드하지 않도록 할 수 있습니다.

Flutter의 Image 위젯에서 width, height, fit 속성을 사용하여 이미지 크기와 비율을 최적화할 수 있습니다.

 

Image.network(
  'https://via.placeholder.com/150',
  width: 100,  // 너비 설정
  height: 100,  // 높이 설정
  fit: BoxFit.cover,  // 이미지가 위젯 크기에 맞춰지도록 설정
)

 

위 코드에서는 이미지를 100x100 픽셀 크기로 조정하고, BoxFit.cover를 사용하여 이미지 비율을 유지하면서 위젯 크기에 맞게 자르거나 확대합니다.

 

4.2 메모리 관리

Flutter는 기본적으로 네트워크 이미지를 캐싱하여 동일한 이미지를 다시 요청할 때 캐시된 버전을 사용합니다. 그러나 앱이 오래 실행되거나 많은 이미지를 로드할 때 메모리 사용량이 증가할 수 있습니다. 이 경우 cached_network_image 패키지를 사용하여 메모리 관리를 더욱 세밀하게 할 수 있습니다.

 

dependencies:
  cached_network_image: ^3.0.0

 

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Cached Network Image Example'),
        ),
        body: Center(
          child: CachedNetworkImage(
            imageUrl: 'https://via.placeholder.com/150',
            placeholder: (context, url) => CircularProgressIndicator(),  // 로딩 중
            errorWidget: (context, url, error) => Icon(Icons.error),  // 에러 발생 시
          ),
        ),
      ),
    );
  }
}

 

CachedNetworkImage 위젯은 이미지를 캐싱하고, 메모리 관리와 네트워크 사용을 최적화할 수 있는 기능을 제공합니다. 이를 통해 네트워크 요청을 최소화하고, 성능을 향상시킬 수 있습니다.

 

 

728x90

 

5. FadeInImage를 사용한 이미지 로드 애니메이션

Flutter에서는 FadeInImage 위젯을 사용하여 이미지 로드 시 페이드 인 효과를 추가할 수 있습니다. 이 위젯은 기본 이미지(플레이스홀더)와 네트워크 이미지를 자연스럽게 전환할 수 있도록 도와줍니다.

 

5.1 FadeInImage 사용 예제

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FadeIn Image Example'),
        ),
        body: Center(
          child: FadeInImage.assetNetwork(
            placeholder: 'assets/loading.png',  // 로딩 중 표시할 기본 이미지
            image: 'https://via.placeholder.com/150',  // 네트워크 이미지
            fadeInDuration: Duration(seconds: 1),  // 페이드 인 애니메이션 지속 시간
          ),
        ),
      ),
    );
  }
}

 

FadeInImage.assetNetwork는 네트워크 이미지를 불러올 때 기본 이미지에서 부드럽게 전환하는 페이드 인 효과를 제공합니다. 이 효과는 이미지 로딩 경험을 개선할 수 있는 좋은 방법입니다.

결론

Flutter에서 네트워크 이미지를 사용하는 방법은 매우 간단하면서도 강력한 기능을 제공합니다. Image.network 위젯을 사용하여 네트워크에서 이미지를 불러오고, 로딩 상태 처리와 에러 처리를 통해 사용자 경험을 개선할 수 있습니다. 또한, cached_network_image 패키지와 FadeInImage를 활용하여 이미지 캐싱 및 애니메이션 효과를 추가함으로써 앱 성능을 최적화할 수 있습니다. 이번 글에서 설명한 방법들을 활용하여 Flutter 애플리케이션에서 네트워크 이미지를 효과적으로 관리해보세요.