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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.aliothx.net/start/uiux/ui-ux/imageview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.