[flutter] 플러터 Column을 사용한 카드 뷰 구현하기

20 Dec 2023

flutter

플러터(Flutter)를 사용하여 UI를 구축할 때, Column은 여러 위젯을 세로로 배치하는 데 유용하게 사용됩니다. 이번에는 Column을 활용하여 카드 뷰를 만드는 방법에 대해 알아보겠습니다.

기본적인 Column 구현

가장 먼저, Column 위젯을 사용하여 기본적인 레이아웃을 구현할 수 있습니다. 카드 뷰에는 이미지, 제목, 부제목, 그리고 설명 텍스트 등이 포함될 수 있습니다.

Column(
  children: <Widget>[
    Image.asset('images/card_image.png'),
    Text(
      '제목',
      style: TextStyle(
        fontSize: 24.0,
        fontWeight: FontWeight.bold,
      ),
    ),
    Text(
      '부제목',
      style: TextStyle(
        fontSize: 18.0,
        fontWeight: FontWeight.normal,
      ),
    ),
    Text(
      '설명 텍스트',
    ),
  ],
)

카드 스타일 적용

카드 뷰에 스타일을 적용하여 더 시각적으로 매력적인 UI를 만들 수 있습니다. Card와 Padding 위젯을 사용하여 카드의 외관을 꾸밀 수 있습니다.

Card(
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      children: <Widget>[
        Image.asset('images/card_image.png'),
        Text(
          '제목',
          style: TextStyle(
            fontSize: 24.0,
            fontWeight: FontWeight.bold,
          ),
        ),
        Text(
          '부제목',
          style: TextStyle(
            fontSize: 18.0,
            fontWeight: FontWeight.normal,
          ),
        ),
        Text(
          '설명 텍스트',
        ),
      ],
    ),
  ),
)

Column 속성 활용

Column 위젯은 여러 속성들을 제공하여 레이아웃을 보다 효과적으로 구성할 수 있습니다. mainAxisAlignment와 crossAxisAlignment를 조절하여 위젯들을 정렬하고 간격을 조절할 수 있습니다. 또한, Expanded와 같은 위젯을 활용하여 레이아웃을 더 동적으로 구성할 수도 있습니다.

이처럼 Column을 사용하여 간단하면서도 효과적인 카드 뷰를 만들 수 있습니다.

위젯의 자세한 사용법 및 다양한 속성에 대한 정보는 플러터 공식 문서를 참고하시기 바랍니다.

이상으로 플러터 Column을 활용한 카드 뷰 구현에 대해 알아보았습니다. 감사합니다.

플러터 공식 문서