> 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/card.md).

# 카드 (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를 보다 풍부하게 디자인할 수 있습니다. 각 카드 위젯은 유연한 사용자 정의 옵션을 제공하므로, 프로젝트의 요구 사항에 맞게 적절히 활용할 수 있습니다. 

###