Container와 BoxDecoration을 활용하여 3개의 카드 UI를 수직 방향(Column)으로 배치하는 실전 예제를 구현한다. 각 카드는 콘텐츠 미리보기 형태로 디자인하고, 실제 앱에서 활용할 수 있는 구조를 설계한다.
오늘의 추천 콘텐츠를 보여주는 홈 화면 구성 시나리오를 기반으로 한다. 각 카드는 다음 요소로 구성된다:
- 썸네일 이미지 (상단)
- 콘텐츠 제목 (굵은 텍스트)
- 간단한 설명 (짧은 문단)
- 좋아요 또는 북마크 아이콘 (우측 하단)
이 예제에서는 아직 List 위젯을 다루지 않았기 때문에, 3개의 카드를 Column 안에 직접 배치하는 방식으로 구현한다.
일반적으로는 동일한 구조의 항목들을 나열할 땐 ListView 등을 사용하지만, 지금은 Column과 기본 위젯만을 활용해 카드 UI를 구성하는 데 집중한다.
각 카드에는 BoxDecoration으로 그림자, 둥근 모서리, 배경색을 설정한다.