Flutter의 카드(Card) 위젯 사용법

Flutter에서 Card 위젯은 내용과 스타일이 통일된 정보를 표시하는 데 유용한 UI 요소입니다. 카드 위젯은 일반적으로 그림자와 모서리가 둥근 테두리를 가지고 있으며, 정보를 그룹화하여 사용자에게 시각적으로 구분된 영역을 제공합니다. 이번 글에서는 Flutter의 Card 위젯의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

1. 기본 Card 사용법

Card 위젯의 기본적인 사용법은 단순합니다. 자식 위젯을 포함하는 카드 레이아웃을 만들 수 있습니다.

 

Card(
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Hello, Flutter!'),
  ),
)

 

위 코드는 텍스트를 포함한 기본적인 카드를 생성합니다. Padding 위젯을 사용하여 카드 내부에 여백을 추가합니다.

2. 카드의 스타일 지정

카드의 모양과 스타일을 지정하려면 shape, elevation, margin 등의 속성을 사용할 수 있습니다.

 

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15.0),
  ),
  elevation: 5,
  margin: EdgeInsets.all(10),
  child: Padding(
    padding: EdgeInsets.all(16.0),
    child: Text('Styled Card'),
  ),
)

 

위 코드는 둥근 모서리와 그림자가 있는 스타일이 지정된 카드를 생성합니다. shape 속성을 사용하여 둥근 모서리를 만들고, elevation 속성을 사용하여 그림자 깊이를 조정하며, margin 속성을 사용하여 카드 외부의 여백을 설정합니다.

3. 카드 내부 구성

카드 내부에 다양한 위젯을 포함하여 복잡한 레이아웃을 구성할 수 있습니다. Column이나 Row 위젯을 사용하여 여러 요소를 배치할 수 있습니다.

 

Card(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      ListTile(
        leading: Icon(Icons.album),
        title: Text('Flutter Development'),
        subtitle: Text('Learn to build beautiful apps'),
      ),
      ButtonBar(
        children: <Widget>[
          TextButton(
            child: Text('LEARN MORE'),
            onPressed: () {},
          ),
          TextButton(
            child: Text('BUY'),
            onPressed: () {},
          ),
        ],
      ),
    ],
  ),
)

 

위 코드는 아이콘, 제목, 부제목, 그리고 버튼이 포함된 복잡한 레이아웃의 카드를 생성합니다. ListTile 위젯을 사용하여 카드의 주요 내용을 구성하고, ButtonBar 위젯을 사용하여 버튼들을 배치합니다.

4. 이미지와 함께 사용하는 Card

카드에 이미지를 포함하여 더 시각적으로 매력적인 레이아웃을 만들 수 있습니다.

 

Card(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
      ListTile(
        title: Text('Owl Image'),
        subtitle: Text('An owl displayed in a card'),
      ),
    ],
  ),
)

 

위 코드는 네트워크 이미지를 포함한 카드를 생성합니다. Image.network 위젯을 사용하여 이미지를 불러오고, ListTile을 사용하여 텍스트를 추가합니다.

5. 여러 카드 나열하기

여러 개의 카드를 나열하여 리스트를 구성할 수 있습니다. ListView 위젯을 사용하여 스크롤 가능한 카드 목록을 만들 수 있습니다.

 

ListView(
  padding: EdgeInsets.all(8.0),
  children: <Widget>[
    Card(
      child: ListTile(
        title: Text('Card 1'),
        subtitle: Text('Subtitle 1'),
      ),
    ),
    Card(
      child: ListTile(
        title: Text('Card 2'),
        subtitle: Text('Subtitle 2'),
      ),
    ),
    Card(
      child: ListTile(
        title: Text('Card 3'),
        subtitle: Text('Subtitle 3'),
      ),
    ),
  ],
)

 

위 코드는 세 개의 카드를 포함한 스크롤 가능한 리스트를 생성합니다. 각 카드에는 제목과 부제목이 포함된 ListTile이 사용됩니다.

결론

Card 위젯은 Flutter 애플리케이션에서 시각적으로 구분된 정보를 표시하는 데 매우 유용한 도구입니다. 기본적인 카드부터 복잡한 레이아웃과 이미지를 포함한 카드까지 다양한 스타일과 구성을 지원합니다. Card 위젯을 활용하여 정보가 잘 정리된, 아름다운 UI를 만들어보세요. Flutter의 강력한 레이아웃 시스템을 통해 직관적이고 효율적인 사용자 인터페이스를 설계할 수 있습니다.