# 카드 (Card)

### Standard Card

![](/files/WgyTiuLqcHmhuQyDZxHf)

기본형의 카드를 구현하는 StandardCard입니다. 이 카드는 다양한 스타일링 옵션을 제공하며, 그림자와 경계선으로 강조할 수 있습니다.

```dart
StandardCard(
                  text: '',
                  backgroundColor: Colors.white,
                  borderColor: agnesTheme.primaryColor,
                  borderRadius: 20,
                  borderWidth: 1,
                  shadowColor: agnesTheme.primaryColor,
                  elevation: 10,
                  margin: 20,
                  height: null,
                  width: null,
                );
```

### Rectangle Card

![](/files/pp0mnOeL0qo2IXQGMPvc)

모서리가 사각형인 모양의 카드인 RectangleCard는 StandardCard와 비슷하지만 모양이 사각형입니다.

```dart
RectangleCard(
                  text: '',
                  backgroundColor: Colors.white,
                  borderColor: agnesTheme.primaryColor,
                  borderRadius: 20,
                  borderWidth: 1,
                  shadowColor: agnesTheme.primaryColor,
                  elevation: 10,
                  margin: 20,
                  height: null,
                  width: null,
                );
```

### Circle Card

![](/files/GD7ZYAaqMkP8kLjdFxKL)

원형의 카드를 나타내는 CircleCard는 독특한 모양을 가지며, 원의 형태를 띕니다.

```dart
CircleCard(
                  text: '',
                  backgroundColor: Colors.white,
                  borderColor: agnesTheme.primaryColor,
                  borderWidth: 1,
                  shadowColor: agnesTheme.primaryColor,
                  elevation: 10,
                  margin: 20,
                  height: 200,
                  width: 200,
                );
```

### Label Card

![](/files/4By8CQpPjLpSgQpxrs0z)

라벨이 있는 카드인 LabelCard는 정보를 강조하는데 유용합니다. 라벨과 텍스트를 함께 표시할 수 있습니다.

```dart
LabelCard(
                  backgroundColor: Colors.white,
                  borderColor: agnesTheme.primaryColor,
                  borderRadius: 20,
                  borderWidth: 1,
                  shadowColor: agnesTheme.primaryColor,
                  blurRadius: 5,
                  cardwidth: MediaQuery.of(context).size.width * 0.9,
                  cardheight: 50,
                  labelwidth: 50,
                  labelheight: 20,
                  label: '',
                  text: '',
                );
```

### Divided Card

![](/files/itU1R7njo7ZzZ6g2BZt3)

위와 아래를 구분하는 선이 있는 카드인 DividedCard는 섹션을 나눌 때 유용합니다. 위 아래 색상을 설정할 수 있습니다.

```dart
DividedCard(
                  topColor: Colors.white,
                  bottomColor: agnesTheme.primaryColor,
                  borderRadius: 20,
                  shadowColor: agnesTheme.primaryColor,
                  blurRadius: 5,
                  cardWidth: MediaQuery.of(context).size.width * 0.9,
                  topText: '',
                  bottomText: '',
                );
```

### Custom Card

![](/files/tvTG3NOez3Jl3Fz2kbpV)

맞춤형 카드인 CustomCard는 제목, 부제목, 설명 및 버튼을 포함하여 다양한 정보를 표시할 수 있습니다.

```dart
CustomCard(
                  backgroundColor: Colors.white,
                  borderColor: agnesTheme.primaryColor,
                  borderRadius: 20,
                  borderWidth: 1,
                  shadowColor: agnesTheme.primaryColor,
                  elevation: 10,
                  margin: 20,
                  height: null,
                  width: null,
                  title: 'title',
                  subtitle: 'subtitle',
                  description: 'description',
                  buttontext: 'button',
                );
```

위와 같은 다양한 카드 위젯을 사용하여 Flutter 앱의 UI를 보다 풍부하게 디자인할 수 있습니다. 각 카드 위젯은 유연한 사용자 정의 옵션을 제공하므로, 프로젝트의 요구 사항에 맞게 적절히 활용할 수 있습니다. 

###


---

# 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/card.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.