Flutter 앱에서 정보를 시각적으로 나타낼 때 Card 위젯은 매우 유용합니다. Card 위젯은 시각적으로 매력적인 디자인을 제공하면서 레이아웃을 간편하게 구성할 수 있는 기능을 제공합니다. 여기서는 Flutter 앱에서 Card 위젯을 사용하여 카드 레이아웃을 만드는 방법에 대해 알아보겠습니다.

1. Card 위젯 생성하기

Card 위젯을 생성하려면 Card 클래스를 이용하여 새로운 Card 위젯을 만들어야 합니다.

Card(
  child: ListTile(
    leading: Icon(Icons.album),
    title: Text('Flutter Card 위젯'),
    subtitle: Text('Flutter 앱에서 카드 레이아웃을 만드는 방법을 알아봅시다.'),
  ),
);

위 코드에서 Card 위젯 안에 ListTile 위젯을 추가하여 카드의 내용을 정의할 수 있습니다. 여기에 leading 속성을 사용하여 아이콘과 title, subtitle 속성을 사용하여 제목과 부제목 텍스트를 추가할 수 있습니다.

2. Card 속성과 스타일 지정하기

Card 위젯은 배경색, 그림자 효과 및 모서리 둥글기와 같은 다양한 스타일과 속성을 가지고 있습니다. 아래는 Card 위젯을 스타일링하는 몇 가지 예시입니다.

Card(
  color: Colors.blueGrey,
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15.0),
  ),
  child: Container(
    padding: EdgeInsets.all(10),
    child: Text('이 카드는 파란색 배경과 그림자 효과를 가지고 있습니다.'),
  ),
);

위 코드에서는 color 속성을 사용하여 배경색을 지정하고, elevation 속성을 사용하여 그림자 효과를 조절하며, shape 속성을 사용하여 모서리를 둥글게 만들었습니다.

3. Card 위젯을 이용한 동적 데이터 표시하기

Card 위젯을 이용하여 동적 데이터를 표시하려면 ListView와 함께 사용하여 여러 카드를 동적으로 표시할 수 있습니다.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return Card(
      child: ListTile(
        title: Text(items[index].title),
        subtitle: Text(items[index].subtitle),
        leading: CircleAvatar(
          backgroundImage: NetworkImage(items[index].imageUrl),
        ),
      ),
    );
  },
);

위의 코드에서 ListView.builder를 이용하여 동적으로 Card를 생성하고, itemBuilder를 사용하여 각 항목의 정보를 표시합니다.

이제 Flutter 앱에서 Card 위젯을 통해 매력적이고 유연한 카드 레이아웃을 만들 수 있습니다. 여러분의 앱 디자인을 향상시키고, 사용자에게 보다 풍부한 경험을 제공하기 위해 Card 위젯을 적극적으로 활용해보세요.

더 많은 정보를 원하시면 공식 Flutter 문서를 참고하시기 바랍니다.