플러터에서 이미지 표시하는 방법 (초보자 가이드)

안녕하세요! 플러터에서 이미지를 표시하는 방법에 대해 자세히 알아보겠습니다.

플러터는 모바일 앱 개발을 위한 강력한 프레임워크이며, 이미지 표시 기능 또한 앱의 디자인과 사용성을 향상시키는 데 중요한 역할을 합니다.

이 가이드에서는 플러터에서 이미지를 표시하는 두 가지 주요 방법, Image 위젯과 NetworkImage 위젯을 사용한 방법을 단계별로 안내해 드리겠습니다.

 

1. Image 위젯 사용하기

 

1.1 로컬 이미지 표시하기

• 단계 1: 이미지 파일 준비하기

앱 내에서 사용할 이미지 파일을 준비합니다. 이미지 파일은 앱의 assets 폴더에 저장해야 합니다. 예를 들어, assets/images/example.png라는 이름으로 이미지 파일을 저장한다고 가정해봅시다.

• 단계 2: Image 위젯 사용하기

Dart 코드에서 Image 위젯을 사용하여 이미지를 표시합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image.asset('assets/images/example.png'),
      ),
    );
  }
}

 

위 코드에서는 Image.asset 위젯을 사용하여 assets/images/example.png 이미지를 표시합니다.

• 단계 3: 실행하기

위 코드를 실행하면 앱 화면 중앙에 이미지가 표시됩니다.

 

1.2 이미지 크기 조정하기

Image 위젯은 다양한 속성을 사용하여 이미지 크기를 조정하거나 자르는 등을 설정할 수 있습니다.

Image.asset(
  'assets/images/example.png',
  width: 100, // 이미지 너비 설정
  height: 100, // 이미지 높이 설정
  fit: BoxFit.cover, // 이미지 자르기 방식 설정 (cover, contain 등)
),

 

위 코드에서는 이미지 너비를 100, 높이를 100으로 설정하고, fit 속성을 사용하여 이미지를 컨테이너에 맞춰 자르도록 설정했습니다.

 

1.3 이미지 자르기

fit 속성을 사용하여 이미지 자르는 방식을 설정할 수 있습니다.

• BoxFit.cover: 이미지를 컨테이너에 맞춰 최대한 크게 표시하고, 넘치는 부분은 잘라냅니다.
• BoxFit.contain: 이미지를 컨테이너 안에 최대한 크게 표시하고, 빈 공간은 검정색으로 채웁니다.
• BoxFit.fitWidth: 이미지 너비를 컨테이너 너비에 맞추고, 높이는 비율에 따라 조정합니다.
• BoxFit.fitHeight: 이미지 높이를 컨테이너 높이에 맞추고, 너비는 비율에 따라 조정합니다.
• BoxFit.none: 이미지를 자르지 않고 원본 크기 그대로 표시합니다.

1.4 이미지 회전하기

alignment 속성을 사용하여 이미지 회전 각도를 설정할 수 있습니다.

Image.asset(
  'assets/images/example.png',
  alignment: Alignment.topLeft, // 이미지 정렬 위치 설정 (topLeft, topCenter, topRight 등)
),

 

위 코드에서는 이미지를 왼쪽 상단에 정렬하도록 설정했습니다.

1.5 이미지 색상 변경하기

color 속성을 사용하여 이미지 색상을 변경할 수 있습니다.

Image.asset(
  'assets/images/example.png',
  color: Colors.red, // 이미지 색상 설정
),

 

위 코드에서는 이미지를 빨간색으로 변경하도록 설정했습니다.

 

2. NetworkImage 위젯 사용하기

 

2.1 인터넷 이미지 표시하기

• 단계 1: 이미지 URL 준비하기

표시할 인터넷 이미지의 URL을 준비합니다. 예를 들어, [유효하지 않은 URL 삭제됨] URL을 사용한다고 가정해봅시다.

• 단계 2: NetworkImage 위젯 사용하기

Dart 코드에서 NetworkImage 위젯을 사용하여 인터넷 이미지를 표시합니다.

Image.network(
  'https://example.com/image.png',
),

 

위 코드에서는 Image.network 위젯을 사용하여 https://example.com/image.png 이미지를 표시합니다.

• 단계 3: 실행하기

위 코드를 실행하면 앱 화면에 인터넷 이미지가 표시됩니다.

 

2.2 로딩 표시 및 오류 처리

NetworkImage 위젯은 이미지 로딩 과정을 표시하고 로딩 실패 시 오류 처리를 수행할 수 있도록 합니다.

Image.network(
  'https://example.com/image.png',
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return CircularProgressIndicator(); // 로딩 표시
  },
  errorBuilder: (context, error, stackTrace) {
    return Text('Error loading image'); // 오류 메시지 표시
  },
),

 

위 코드에서는 로딩 과정에 CircularProgressIndicator를 표시하고, 로딩 실패 시에는 "Error loading image" 메시지를 표시하도록 설정했습니다.

• loadingBuilder: 로딩 과정을 표시하는 위젯을 반환하는 함수입니다.
• errorBuilder: 로딩 오류 발생 시 표시하는 위젯을 반환하는 함수입니다.

2.3 캐싱

NetworkImage 위젯은 기본적으로 이미지 캐싱 기능을 제공하지 않습니다. 이미지 로딩 속도를 향상시키려면 캐싱 기능을 사용하는 것이 좋습니다.

• CachedNetworkImage 패키지 사용하기

CachedNetworkImage 패키지를 사용하면 이미지를 캐시하여 로딩 속도를 높일 수 있습니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CachedNetworkImage(
          imageUrl: 'https://example.com/image.png', // 이미지 URL 지정
          placeholder: (context, url) => CircularProgressIndicator(), // 로딩 표시
          errorWidget: (context, url, error) => Icon(Icons.error), // 오류 아이콘 표시
        ),
      ),
    );
  }
}

 

위 코드에서는 CachedNetworkImage 위젯을 사용하여 이미지를 표시하고, 로딩 표시 및 오류 처리를 설정했습니다.

• placeholder: 로딩 과정에 표시할 위젯을 반환하는 함수입니다.
• errorWidget: 로딩 오류 발생 시 표시할 위젯을 반환하는 함수입니다.

3. 이미지 패키지

플러터에는 이미지 처리 및 편집을 위한 다양한 패키지들이 존재합니다.

• flutter_image: 이미지 크기 조정, 회전, 자르기 등의 기능 제공
• image_picker: 카메라 또는 갤러리에서 이미지 선택 기능 제공
• flutter_svg: SVG 이미지 표시 기능 제공

4. 추가 정보

• 플러터 이미지 위젯 공식 문서: https://api.flutter.dev/flutter/widgets/Image-class.html
• 플러터 NetworkImage 위젯 공식 문서: https://api.flutter.dev/flutter/widgets/Image-class.html
• 플러터 이미지 패키지: https://pub.dev/packages/image
• 플러터 이미지 피커 패키지: https://pub.dev/packages/image_picker
• 플러터 SVG 패키지: https://pub.dev/packages/flutter_svg

5. 궁금한 점 및 도움 요청

이 블로그 글에서 다룬 내용 외에도 플러터 이미지 표시에 대한 궁금한 점이나 도움이 필요한 부분이 있으면 언제든지 질문해주세요.

 

6. 관련 블로그 글

• 플러터에서 다이얼로그 만들기: http://blog.naver.com/
• 플러터에서 네트워크 요청하기: http://blog.naver.com/
• 플러터에서 데이터베이스 사용하기: https://m.blog.naver.com/plusstar75/222076913414

7. 추가 팁

• 이미지를 더 빠르게 표시하려면 이미지 압축을 고려해보세요.
• 이미지 품질을 유지하면서 파일 크기를 줄이는 다양한 이미지 압축 도구들이 존재합니다.
• 이미지를 웹에서 직접 로드하는 대신 앱 내에 저장하는 것이 좋습니다.
• 이렇게 하면 오프라인 모드에서도 이미지를 표시할 수 있고, 네트워크 연결이 불안정한 경우에도 이미지 로딩 속도를 향상시킬 수 있습니다.

8. 마무리

플러터에서 이미지를 표시하는 방법은 다양하며, 상황에 따라 적절한 방법을 선택하는 것이 중요합니다.

이 블로그 글을 통해 플러터 이미지 표시에 대한 기본적인 개념을 이해하셨기를 바랍니다.

더 궁금한 점이 있으면 언제든지 질문해주세요.

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

나비일기장 [수발일기장] - Google Play 앱

 

 

 

 

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

Tester Share [테스터쉐어] - Google Play 앱