Flutter Card Widget

Contents

카드(Card) 위젯 개요 (Overview)

Flutter의 Card 위젯은 깔끔한 경계와 그림자가 있는 박스를 생성할 때 사용됩니다. 일반적으로 내용(예: 텍스트, 이미지, 버튼 등)을 표시하는 데 유용하며, 디자인 원칙인 Material Design을 기반으로 제작되었습니다.

주요 속성 (Key Properties)

elevation: 카드의 그림자 깊이를 조절합니다. 숫자가 높을수록 그림자가 짙고 더 높은 레이어처럼 보입니다.
shape: 카드의 외곽 모양을 정의합니다. 일반적으로 둥근 모서리를 위해 RoundedRectangleBorder를 많이 사용합니다.
color: 카드의 배경색을 설정합니다.
margin: 카드 주위의 외부 여백을 설정합니다.
child: 카드 내부에 배치할 위젯을 지정합니다.

카드 예제 (Example of 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 Widget Example')),
        body: Center(
          child: Card(
            elevation: 4.0,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            color: Colors.blue[50],
            margin: EdgeInsets.all(16.0),
            child: Padding(
              padding: EdgeInsets.all(16.0),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    'Card 위젯',
                    style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 10.0),
                  Text(
                    'Flutter에서 Card는 Material Design의 스타일로 구성된 컨테이너입니다.',
                  ),
                  SizedBox(height: 10.0),
                  ElevatedButton(
                    onPressed: () {},
                    child: Text('확인'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

주요 사용 팁 (Usage Tips)

간단한 레이아웃: Card 위젯은 단일 자식(child)을 가지므로, 복잡한 레이아웃은 Column, Row, 또는 ListView와 함께 사용해야 합니다.
둥근 모서리 디자인: 카드의 외곽을 부드럽게 만들고 싶다면 shape 속성에 RoundedRectangleBorder를 지정합니다.
레이아웃 조정: 카드의 위치와 여백은 margin 속성으로 조절 가능합니다.

추가 예제 (Additional Examples)

1. 이미지가 포함된 카드

Card(
  elevation: 5,
  child: Column(
    children: [
      Image.network('https://via.placeholder.com/150'),
      Padding(
        padding: EdgeInsets.all(8.0),
        child: Text('이미지 카드 예제'),
      ),
    ],
  ),
)

2. 리스트 카드

ListView(
  children: [
    Card(
      child: ListTile(
        leading: Icon(Icons.person),
        title: Text('사용자 1'),
        subtitle: Text('세부정보'),
      ),
    ),
    Card(
      child: ListTile(
        leading: Icon(Icons.person),
        title: Text('사용자 2'),
        subtitle: Text('세부정보'),
      ),
    ),
  ],
)

위와 같은 방식으로 Card 위젯은 다양한 상황에 맞게 사용할 수 있습니다.

Post Views: 611