[flutter] Card 위젯의 기본적인 속성과 기능
Flutter에서 Card 위젯은 간단한 그리기로써 UI에 그림자와 둥근 모서리를 추가하여 손쉽게 특정 컨텐츠를 감쌀 수 있는 매우 유용한 위젯입니다. 이 기술 블로그에서는 Card 위젯의 기본적인 속성과 사용법에 대해 알아보도록 하겠습니다.
목차
Card 위젯의 기본 속성
Flutter에서 Card 위젯은 여러 가지 속성을 가지고 있습니다. 가장 일반적인 속성은 다음과 같습니다:
- elevation: Card 위젯 주변에 생성되는 그림자의 깊이를 결정합니다.
- shape: Card의 모양을 결정합니다. 일반적으로는 RoundedRectangleBorder를 사용하여 둥근 모서리를 지정합니다.
- color: Card의 배경색을 지정합니다.
- margin: Card와 주변 요소 사이의 공간을 조정합니다.
Card 위젯의 기능
Card 위젯은 다양한 기능을 가지고 있어서 다양한 방법으로 사용될 수 있습니다:
- 그리드 뷰 내에서 아이템 감싸기: 그리드 뷰 내에서 각 타일을 Card로 감싸서 그림자와 둥근 모서리를 쉽게 추가할 수 있습니다.
- 리스트 뷰 내에서 아이템 감싸기: 리스트 뷰 아이템을 Card로 감싸서 요소들을 시각적으로 구분할 수 있습니다.
- 클릭 가능한 요소 만들기: Card를 사용하여 사용자가 클릭할 수 있는 UI 요소를 만들 수 있습니다.
예제 코드
아래는 Card 위젯의 간단한 예제 코드입니다:
Card(
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
color: Colors.white,
margin: EdgeInsets.all(10),
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text('이것은 Card 위젯입니다.'),
),
)
마치며
이 기술 블로그에서는 Flutter의 Card 위젯에 대해 기본적인 속성과 기능에 대해 살펴보았습니다. Card 위젯은 간단하게 사용할 수 있지만 UI를 개선하는데 매우 유용한 기능을 가지고 있습니다. Flutter 앱을 개발할 때, Card 위젯을 적재적소에 활용하여 보다 풍부하고 사용자 친화적인 UI를 만들어보세요!