[flutter] 플러터에서 Card 위젯 사용하기

12 Dec 2023

flutter

플러터는 UI를 구성하기 위한 다양한 위젯들을 제공합니다. 이 중에서 Card 위젯은 정보를 나타내는 데에 유용하게 활용됩니다. Card 위젯을 사용하여 간단한 디자인과 정보를 보기 좋게 표현할 수 있습니다.

Card 위젯 생성하기

Card 위젯을 생성하는 방법은 매우 간단합니다. 먼저, 해당 Card에 표시할 내용을 정의한 후, Card 위젯을 생성하여 해당 내용을 포함시키면 됩니다.

아래는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Card 위젯 예제'),
        ),
        body: Center(
          child: Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                const ListTile(
                  leading: Icon(Icons.album),
                  title: Text('곡명'),
                  subtitle: Text('가수명'),
                ),
                ButtonBar(
                  children: <Widget>[
                    FlatButton(
                      child: const Text('상세정보'),
                      onPressed: () {/* ... */},
                    ),
                    FlatButton(
                      child: const Text('좋아요'),
                      onPressed: () {/* ... */},
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

위 코드는 Card 위젯 안에 ListTile과 ButtonBar를 포함시켜 간단한 레이아웃을 구성한 예제입니다.

보다 복잡한 디자인은 ListTile과 Column 등을 조합하여 구성할 수 있습니다.

요약

플러터에서 Card 위젯을 사용하면 간단하게 정보를 나타내고 꾸밀 수 있습니다. 복잡한 디자인을 위해서는 ListTile, Column, ButtonBar 등의 다른 위젯과 조합하여 사용할 수 있습니다.

더 많은 정보는 공식 문서를 참고하세요.