[flutter 플러터] 47강 강의리뷰_Card & ListTile (Row의 대체재)

Card 위젯은 Container 와 같이 다양한 요소(내용)들을 담을 수 있다. 이때 Container 와의 차이점은 Card 의 경우 생성되는 기본 도형(border)의 모서리가 사각형이 아니라 둥근 형태라는 것이다. 또한 Card 는 padding 을 프로퍼티로 가질 수 없다. (다만 margin 은 그대로 가질 수 있다.)

 

그렇다보니 Card는 주로 ListTile 이라는 위젯과 함께 쓰이는데, ListTile은 Row와 비슷하게 요소들을 나열해주는 위젯이다. 수직적 나열은 불가하고 수평적 나열만 가능하다. (수직적 나열은 ListView 사용) leading과 title 프로퍼티를 사용해서 요소들을 작성해주면, 자동으로 위젯에서 이 요소들을 적당한 간격으로 나열해준다. Row는 요소와 요소 사이에 공백을 만들어주고 싶으면 일일히 sizedBox 위젯을 사용해야 했는데 훨씬 간편해졌다. 아래는 예시 코드이다. 

 

Card(
                color: Colors.white,
                //padding: EdgeInsets.all(10.0),
                margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                child: ListTile(
                  leading: Icon(
                      Icons.email,
                      color: Colors.teal.shade900),
                  title: Text(
                    'brightty69@naver.com',
                    style: TextStyle(
                        fontSize: 20.0,
                        color: Colors.teal[900],
                        fontFamily: 'Source Sans Pro'),
                  ), // TextStyle
                ) // ListTile
              ), // Card

 

*공식 문서: https://api.flutter.dev/flutter/material/Card-class.html