Flutter로 간단한 이미지 뷰어 앱 만들기: 로컬 및 네트워크 이미지 로드

안녕하세요! 이번에는 Flutter에서 이미지 뷰어 앱을 만들어보겠습니다. 이미지를 로컬 파일에서 가져오거나 네트워크에서 로드하는 방법을 배워보며, 간단한 이미지 확대/축소 기능까지 추가해볼 거예요. Flutter의 Image 위젯과 InteractiveViewer를 활용해 앱을 구현해 보겠습니다.

 

 

목차

1. 이미지 뷰어 앱 개요
2. Flutter에서 로컬 및 네트워크 이미지 로드
3. 이미지 확대/축소 기능 추가
4. Flutter 초보자의 시행착오
5. 다음 단계: 고급 이미지 뷰어 앱 만들기

 

 

1. 이미지 뷰어 앱 개요

목표 기능

• 로컬 이미지와 네트워크 이미지를 앱에 표시.
• 이미지를 확대/축소하거나 드래그할 수 있는 인터페이스 제공.

최종 결과

• 앱 화면에 하나의 로컬 이미지와 하나의 네트워크 이미지를 표시.
• 이미지 클릭 시 확대/축소 가능.

 

 

2. Flutter에서 로컬 및 네트워크 이미지 로드

실행 가능한 코드: 기본 이미지 뷰어 구조

import 'package:flutter/material.dart';

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

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

class ImageViewerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("이미지 뷰어 앱"),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            child: Image.asset(
              'assets/local_image.jpg', // 로컬 이미지 경로
              fit: BoxFit.cover,
            ),
          ),
          Expanded(
            child: Image.network(
              '<https://picsum.photos/400>', // 네트워크 이미지 URL
              fit: BoxFit.cover,
            ),
          ),
        ],
      ),
    );
  }
}

주요 포인트

1. 로컬 이미지 추가
   • 프로젝트의 pubspec.yaml 파일에 로컬 이미지 경로를 등록해야 합니다.
   • flutter: assets: - assets/local_image.jpg
   • assets/ 폴더에 이미지를 추가하고 경로를 지정합니다.
2. 네트워크 이미지 로드
   • Image.network()를 사용해 네트워크 URL의 이미지를 표시합니다.

 

 

3. 이미지 확대/축소 기능 추가

Flutter의 InteractiveViewer를 사용해 이미지를 확대/축소하고 드래그할 수 있는 기능을 추가합니다.

수정된 코드: 확대/축소 기능 추가

class ImageViewerScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("이미지 뷰어 앱"),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            child: InteractiveViewer(
              child: Image.asset(
                'assets/local_image.jpg',
                fit: BoxFit.cover,
              ),
            ),
          ),
          Expanded(
            child: InteractiveViewer(
              child: Image.network(
                '<https://picsum.photos/400>',
                fit: BoxFit.cover,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

728x90

 

4. Flutter 초보자의 시행착오

1. 로컬 이미지 경로 문제
   • assets/local_image.jpg 경로를 잘못 설정하거나, pubspec.yaml에 등록하지 않아 이미지가 표시되지 않는 문제가 발생했습니다.
   • 해결: 파일 경로를 정확히 등록하고 flutter pub get을 실행.
   • 만약 그래도 이미지 로드가 안되면 핫리로드가 아닌 앱을 다시 실행해 보시면 되더군요 : )
2. 네트워크 이미지 로드 실패
   • 인터넷 연결 문제 또는 잘못된 URL로 인해 네트워크 이미지가 로드되지 않는 경우가 있었습니다.
   • 해결: 정상적인 URL 사용 및 인터넷 연결 상태 확인.
3. 확대/축소 속도 조정
   • InteractiveViewer의 확대/축소 비율이 너무 민감하게 설정되어 조작이 어려웠습니다.
   • 해결: minScale 및 maxScale 속성을 설정하여 적절한 비율로 제한.
   • InteractiveViewer( minScale: 0.5, maxScale: 4.0, child: Image.network('<https://picsum.photos/400>'), );

 

 

5. 다음 단계: 고급 이미지 뷰어 앱 만들기

• 이미지 슬라이드 기능 추가
  • 여러 이미지를 스와이프하여 탐색할 수 있는 슬라이드 기능 구현.
• 이미지 다운로드 기능
  • 사용자가 네트워크 이미지를 로컬에 저장할 수 있도록 다운로드 버튼 추가.
• 다양한 애니메이션 효과
  • 이미지 로드 시 페이드 인 애니메이션 추가.

 

 

마무리

Flutter로 간단한 이미지 뷰어 앱을 만들어 보며, 로컬 및 네트워크 이미지 로드와 확대/축소 기능을 구현했습니다. 이 앱은 초보자도 쉽게 따라 할 수 있으며, 실제 프로젝트에 활용할 수 있는 유용한 기능들을 포함하고 있습니다.
혹시 이 프로젝트를 진행하며 궁금한 점이나 새로운 아이디어가 있다면 댓글로 공유해주세요! 다음에는 더 재미있는 프로젝트로 돌아오겠습니다. 😊