[Flutter] Widget - Card

1. Card란?

Card Widget은 둥근 모서리와 그림자 효과가 포함된 박스를 제공하는 Widget입니다.

2. Card 생성자 및 속성

https://api.flutter.dev/flutter/material/Card-class.html

Card class - material library - Dart API

Flutter Material API 가이드를 통해 Card Widget의 생성자 및 중요 속성에 대해 정리해보도록 하겠습니다.

 

○ 생성자(Constructor)

<Card 생성자>

 

○ 속성(Property)

1) child

<child 속성>

- 매개변수 타입 : Widget

- 역할 : 하위 Widget 컨텐츠 추가 가능

 

2) color

<color 속성>

- 매개변수 타입 : Color

- 역할 : Card Widget의 배경색 설정

3. Card 예제 코드

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Container(
            height: double.infinity,
            width: double.infinity,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Card(
                  color: Colors.grey[300],
                  child: Container(
                    height: 250.0,
                    width: double.infinity,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Text('Sample'),
                        const SizedBox(
                          height: 10.0,
                        ),
                        Image.network(
                          'https://picsum.photos/200',
                          height: 200.0,
                          width: 200.0,
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

예제 코드의 의미는 다음과 같습니다.

• Scaffold Widget으로 메인 화면을 구현
  • SafeArea Widget으로 여백이 확보된 컨텐츠 영역 지정
    • 높이, 너비가 최대치인 Container Widget 생성
      
      • 세로 기준으로 가운데 정렬된 Column Widget 생성
        • 회색 배경의 Card Widget 생성
          • 높이 250, 너비 최대치인 Container 생성
            • 세로 기준으로 가운데 정렬된 Column Widget 생성
              • 'Sample'이라는 문자열을 표현하는 Text Widget 생성
              • 높이 10의 SizedBox Widget으로 간격 지정
              • Image.network Widget을 통해 높이, 너비 200인 웹에서 샘플 이미지 불러오기

4. Card 실행 결과

<실행 화면>