Flutter Image 위젯 정리 + 간단 예제

📌 1. Image 위젯이란?

✅ 개념

• 화면에 이미지(사진, 아이콘 등)를 표시하는 위젯

• 다양한 소스 지원:

  • 네트워크 (URL)
  • 로컬 assets
  • 파일(File)

---

📌 2. 가장 기본 예제

Image.network("https://picsum.photos/200")

👉 인터넷 이미지 표시

---

📌 3. 네트워크 이미지

Image.network(
  "https://picsum.photos/300",
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

---

📌 4. 로컬 이미지 (assets)

✅ 1️⃣ pubspec.yaml 설정

flutter:
  assets:
    - assets/images/

---

✅ 2️⃣ 사용

Image.asset("assets/images/sample.png")

---

📌 5. 주요 속성

속성	설명
width / height	크기
fit	이미지 채우기 방식
alignment	위치 정렬

---

📌 6. BoxFit 종류 (중요)

값	설명
cover	꽉 채움 (비율 유지, 일부 잘림)
contain	전체 보임 (여백 생김)
fill	비율 무시, 꽉 채움
fitWidth	가로 기준
fitHeight	세로 기준

---

📌 7. 실전 예제 (UI 느낌)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ImageExample(),
    );
  }
}

class ImageExample extends StatelessWidget {
  const ImageExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Image Example")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.network(
              "https://picsum.photos/200",
              width: 150,
              height: 150,
              fit: BoxFit.cover,
            ),
            const SizedBox(height: 20),
            Image.network(
              "https://picsum.photos/300",
              width: 150,
              height: 100,
              fit: BoxFit.contain,
            ),
          ],
        ),
      ),
    );
  }
}

---

📌 8. 로딩 & 에러 처리 (중요)

Image.network(
  "https://invalid-url.com/image.png",
  loadingBuilder: (context, child, progress) {
    if (progress == null) return child;
    return const CircularProgressIndicator();
  },
  errorBuilder: (context, error, stackTrace) {
    return const Icon(Icons.error);
  },
)

---

📌 9. 핵심 정리

기능	방법
네트워크 이미지	Image.network
로컬 이미지	Image.asset
크기 조절	width / height
채우기	BoxFit

---

🚨 자주 하는 실수

❌ assets 설정 안함

👉 pubspec.yaml 누락 → 이미지 안 나옴

---

❌ 사이즈 없이 사용

Image.network("...")

👉 예상 못한 크기 → UI 깨짐

---

🚀 한 줄 핵심

👉 Image + BoxFit = 이미지 UI 핵심

---

🔥 실무 팁

• 리스트 → 작은 이미지 (성능)
• 큰 이미지 → lazy loading
• 항상 fit 지정하는 습관

---