[Flutter22] Card 위젯은?

Flutter의 Card 위젯이란?

Flutter의 Card는 Material Design 스타일의 카드 형태의 UI를 제공하는 위젯입니다.
텍스트, 이미지, 버튼 등 다양한 콘텐츠를 담을 수 있으며, 그림자와 둥근 모서리를 기본으로 제공해 시각적으로 매력적인 UI 요소를 쉽게 구현할 수 있습니다.

 

예제 코드와 주석

아래는 Card 위젯을 사용하는 Flutter 예제 코드이며, 각 부분에 대해 상세한 설명을 포함하고 있습니다.

반응형

 

import 'package:flutter/material.dart'; // Flutter의 Material Design 라이브러리 임포트

void main() {
  runApp(MyApp()); // 애플리케이션의 시작점, MyApp 실행
}

// 앱의 메인 위젯
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Card Example'), // 앱바의 제목 설정
        ),
        body: Center(
          // Card 위젯을 화면 중앙에 배치
          child: Card(
            // Card 위젯: 그림자와 둥근 모서리가 있는 정보 표시용 위젯
            elevation: 5, // 카드 아래 그림자 효과. 값이 클수록 그림자가 짙어짐
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15), // 모서리를 15px 둥글게 설정
            ),
            color: Colors.blue[50], // 카드의 배경색 설정
            margin: EdgeInsets.all(20), // 카드 바깥쪽 여백 (20px씩)
            child: Padding(
              // 카드 내부 콘텐츠에 패딩 추가
              padding: EdgeInsets.all(16), // 내부 여백 16px
              child: Column(
                // Column: 자식 위젯을 수직으로 정렬
                mainAxisSize: MainAxisSize.min, // 카드 높이를 콘텐츠 크기에 맞게 조절
                children: [
                  Text(
                    'Hello Flutter!',
                    style: TextStyle(
                      fontSize: 20, // 텍스트 크기 설정
                      fontWeight: FontWeight.bold, // 텍스트를 굵게 표시
                      color: Colors.black87, // 텍스트 색상 설정
                    ),
                  ),
                  SizedBox(height: 10), // 위젯 사이 간격 추가 (10px)
                  Text(
                    'This is a simple card widget example.',
                    style: TextStyle(
                      fontSize: 16, // 설명 텍스트 크기 설정
                      color: Colors.black54, // 조금 더 밝은 텍스트 색상
                    ),
                  ),
                  SizedBox(height: 20), // 텍스트 아래 여백 추가
                  ElevatedButton(
                    onPressed: () {
                      // 버튼 클릭 시 실행될 동작 정의
                      print('Button Pressed!');
                    },
                    style: ElevatedButton.styleFrom(
                      primary: Colors.blue, // 버튼 배경색 설정
                    ),
                    child: Text('Click Me'), // 버튼에 표시될 텍스트
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

 

 

 

속성별 상세 설명

Card 위젯의 주요 속성

1. elevation:
   • 카드 아래 그림자의 강도를 조절합니다. 값이 클수록 더 강한 그림자 효과를 제공합니다.
2. shape:
   • 카드의 모양을 정의합니다. 예제에서는 RoundedRectangleBorder를 사용해 모서리를 둥글게 설정했습니다. 원형이나 다른 모양으로도 커스터마이징할 수 있습니다.
3. color:
   • 카드의 배경색을 설정합니다. 이 예제에서는 Colors.blue[50]으로 밝은 파란색을 설정했습니다.
4. margin:
   • 카드 외부에 공간(여백)을 추가합니다. 여기서는 모든 면에 20px의 간격을 추가했습니다.
5. child:
   • 카드 내부에 포함될 콘텐츠를 정의합니다. 텍스트, 버튼, 이미지 등 모든 위젯을 추가할 수 있습니다. 이 예제에서는 Column을 사용해 텍스트와 버튼을 배치했습니다.

카드 내부 위젯 설명

• Padding:
  • 카드 내부 콘텐츠에 여백을 추가합니다. 콘텐츠가 카드 가장자리에 붙지 않도록 합니다.
• Column:
  • 카드 안의 자식 위젯을 수직으로 정렬합니다.
• Text:
  • 정적 또는 동적 텍스트를 표시합니다. 예제에서는 제목과 설명 텍스트로 사용되었습니다.
• SizedBox:
  • 위젯 사이에 빈 공간을 추가합니다.
• ElevatedButton:
  • 사용자가 클릭할 수 있는 버튼을 제공합니다. 클릭 시 동작은 onPressed 속성에 정의됩니다.

---

Card 위젯을 효과적으로 사용하는 방법

1. 목적: 카드 위젯은 관련된 콘텐츠를 그룹화하여 보여주기에 적합합니다. 예: 사용자 프로필, 제품 정보, 작업 목록 등.
2. 스타일링: elevation, shape, color 속성을 조합해 디자인 테마에 맞는 카드를 만드세요.
3. 콘텐츠: 내부 콘텐츠로 Image, ListTile 또는 사용자 정의 레이아웃을 추가해 활용도를 높일 수 있습니다.

---

추가적인 Flutter 위젯이나 관련 예제에 대해 궁금한 점이 있다면 언제든지 물어보세요! 😊