카드 (Card)

Flutter는 다양한 디자인 요소를 구현하기 위한 강력한 도구를 제공합니다. 그 중에서도 다양한 형태와 스타일의 카드 위젯을 만들어 UI를 풍부하게 꾸밀 수 있습니다. 이번 글에서는 몇 가지 유용한 카드 위젯을 소개하겠습니다.

Standard Card

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

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

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

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

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

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

Label Card

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

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

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

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

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

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