# 이미지뷰 (ImageView)

## **이미지 슬라이더**

<figure><img src="https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2F9DTcqL5QKr8dIdrSO089%2F%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5%E1%84%87%E1%85%B2%20%E1%84%89%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%A5.gif?alt=media&#x26;token=aa09fb59-04b4-4f14-8b2d-18412984caac" alt=""><figcaption></figcaption></figure>

이미지 슬라이더는 여러 이미지를 슬라이딩하여 보여주는 데 사용됩니다. Flutter에서는 ***`carousel_slider`*** 패키지를 사용하여 이미지 슬라이더를 구현할 수 있습니다. 이미지 URL 목록을 이용하여 슬라이더를 생성할 수 있습니다.

```dart
CarouselSlider(
  options: CarouselOptions(),
  items: imgList.map((item) => Container(
    child: GestureDetector(
      child: CachedNetworkImage(
        imageUrl: item,
        fit: BoxFit.contain,
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
      ),
      onTap: () {
        Popup.dialog(
          context: context,
          child: CachedNetworkImage(
            imageUrl: item,
            fit: imageFit,
            placeholder: (context, url) => CircularProgressIndicator(),
            errorWidget: (context, url, error) => Icon(Icons.error),
          ),
          height: MediaQuery.of(context).size.height * 0.8,
        );
      },
    ),
  )).toList(),
);
```

위 코드에서는 ***`CarouselSlider`*** 위젯을 사용하여 이미지 슬라이더를 생성합니다. 이미지를 클릭하면 이미지가 팝업 창에 표시되는 예시도 포함되어 있습니다.

## **이미지 옵션**

이미지를 효과적으로 표시하기 위해 이미지를 화면에 맞게 조정해야 할 때가 있습니다. Flutter에서는 ***`fit`*** 속성을 사용하여 이미지 크기 및 배치를 제어할 수 있습니다. 아래 코드에서는 이미지를 다양한 방식으로 표시하는 예시를 제공합니다.

<figure><img src="https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2F3MOZy90yhGyRDKtxhw2j%2F%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5%E1%84%87%E1%85%B2%20fit.gif?alt=media&#x26;token=126698f1-f85c-4dbb-87c5-040f634fe49f" alt=""><figcaption></figcaption></figure>

* **contain** : 이미지의 가로세로 비율을 유지하여 이미지를 처리합니다.&#x20;

```dart
BoxFit.contain; 
```

* **cover** : 지정한 영역을 꽉 채우며, 비율을 유지해 이미지를 처리합니다. &#x20;

```dart
BoxFit.cover; 
```

* **fill** : 지정한 영역을 꽉 채우며, 비율을 변경해 이미지를 처리합니다.&#x20;

```dart
BoxFit.fill; 
```

* **none** : 이미지의 원본 크기를 유지해 이미지를 처리합니다.&#x20;

```dart
BoxFit.none; 
```

* **fitWidth** : 이미지의 너비에 맞게 확대 또는 축소하여 이미지를 처리합니다.&#x20;

```dart
BoxFit.fitWidth; 
```

* **fitHeight** : 이미지의 높이에 맞게 확대 또는 축소하여 이미지를 처리합니다.&#x20;

```dart
BoxFit.fitHeight; 
```

위 가이드를 통해 Flutter 앱에서 이미지를 효과적으로 표시하고 조작하는 방법을 익힐 수 있습니다. 이미지 슬라이더 및 이미지 처리 기능을 통해 앱의 사용자 경험을 향상시키고 더 멋진 앱을 개발해보세요.