# 카드 (Card)

### Standard Card

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FavcinYJFNKkwCvCDQSM4%2Fimage.png?alt=media\&token=edbc256b-3c8a-424b-adc4-b03388e0d677)

기본형의 카드를 구현하는 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

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2F848uBC87J93u0e7gZP4g%2Fimage.png?alt=media\&token=dc45c496-bace-4525-b6ca-26d394888ae2)

모서리가 사각형인 모양의 카드인 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

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FoHJkJOnf2l73Xj46z1PW%2Fimage.png?alt=media\&token=dd833ccc-ea95-4edf-a7c4-391e8b37cb00)

원형의 카드를 나타내는 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

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2F1X6DG4UV4k49QhXsOXl0%2Fimage.png?alt=media\&token=e1f51db5-83c4-4804-a42b-9c3192771a59)

라벨이 있는 카드인 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

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2FI5rvTUPiZR2H8Ml5VTK0%2Fimage.png?alt=media\&token=51894b71-a0f5-45b8-8dbd-a91e30817bee)

위와 아래를 구분하는 선이 있는 카드인 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

![](https://2113601596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQwN4pCJIiPfU3rtbboz1%2Fuploads%2Ft4WffDEsftpaaVlAJIrm%2Fimage.png?alt=media\&token=031fcede-068d-483a-a3fb-fd2d1b6ab0cd)

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

###