[Flutter] 카드(Card) 위젯 사용하기

 

카드(Card) 위젯

 

아이템 등에 사용하는 카드 형태의 위젯(Widget). 보통 리스트뷰(ListView)나 그리드뷰(GridView) 와 같은 위젯에 감싸서 사용합니다.

 

 

 

1. CardPage.dart

 

Card(
     child: ...
),

이 형태를 사용합니다.

---

shape: RoundedRectangleBorder(   //모서리를 둥글게 하기 위해 사용
      borderRadius: BorderRadius.circular(16.0),
),

 elevation: 4.0,   //그림자의 깊이를 설정

 

import 'package:flutter/material.dart';

class CardPage extends StatefulWidget {
  const CardPage({Key? key}) : super(key: key);

  @override
  _CardPageState createState() => _CardPageState();
}

class _CardPageState extends State<CardPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: Text('CardPage'),
      ),
      body: Center(
        child: Card(
          shape: RoundedRectangleBorder(  //모서리를 둥글게 하기 위해 사용
            borderRadius: BorderRadius.circular(16.0),
          ),
          elevation: 4.0, //그림자 깊이
          child: Icon(
              Icons.face,
              color: Colors.grey,
              size: 200,
            ),
          ),
        ),
      ),
    );
  }
}

 

 

 

결과 화면