> For the complete documentation index, see [llms.txt](https://developer.aliothx.net/start/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.aliothx.net/start/uiux/ui-ux/imageview.md).

# 이미지뷰 (ImageView)

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

<figure><img src="/files/pk7MxsEy4QZknWRwCYFS" 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="/files/2tZXIpsemuijPPNNwDF9" 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 앱에서 이미지를 효과적으로 표시하고 조작하는 방법을 익힐 수 있습니다. 이미지 슬라이더 및 이미지 처리 기능을 통해 앱의 사용자 경험을 향상시키고 더 멋진 앱을 개발해보세요.