Card & ListTile Widget

 Card & ListTile Widget

 

[Ko]

 

 - Container의 사각형을 둥근 사각형으로 바꾸고 그림자 효과 등을 주기위해 Card widget을 사용하자.

 - Card widget은 padding property가 없으므로, padding 설정을 삭제. Padding 속성을 가지지 않은 widget에 padding을 주기 위해서는 대상 widget을 Padding widget으로 감싸면 됨. (Padding widget의 child로 대상 widget을 넣어줌.)

 - 여기서는 Padding widget을 사용하는 대신 padding이 기본적으로 적용되어 있는 ListTile widget을 사용할 것임. ListTile은 주로 Card widget의 child로 많이 사용되며, icon이나 text를 보여주는데 사용됨. ListTile의 leading과 title 사이에는 자동으로 적당한 간격이 적용되므로 SizedBox를 넣을 필요 없음.

 - Divider widget을 SiedBox의 child로 사용하면 widget과 widget 사이에 1픽셀의 line을 넣을 수 있음.

 - final code

Card(

                  margin:

                      EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),

                  child: ListTile(

                    leading: Icon(

                      Icons.phone,

                      size: 30,

                      color: Colors.teal.shade900,

                    ),

                    title: Text(

                      'xxx',

                      style: TextStyle(

                        color: Colors.teal.shade900,

                        fontFamily: 'Source Snas Pro',

                        fontSize: 20.0,

                      ),

                    ),

                  )),

 

=================================================================

 

[En]

 

- Use the Card widget to turn the container's rectangle into a rounded rectangle and give a shadow effect.
 - The Card widget has no padding property, so the padding setting has been deleted. To padding a widget that does not have a padding property, simply wrap the target widget with a padding widget. (The target widget is put as a child of the padding widget.)
 - Here, instead of using the Padding widget, we will use the ListTile widget with padding applied by default. ListTile is mainly used as a child of the Card widget, and is used to display icons or text. There is no need to insert SizedBox because appropriate spacing is automatically applied between the leading and title of ListTile.
 - If Divider widget is used as a child of SiedBox, 1 pixel line can be inserted between widget and widget.

 - final code

Card(

                  margin:

                      EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),

                  child: ListTile(

                    leading: Icon(

                      Icons.phone,

                      size: 30,

                      color: Colors.teal.shade900,

                    ),

                    title: Text(

                      'xxx',

                      style: TextStyle(

                        color: Colors.teal.shade900,

                        fontFamily: 'Source Snas Pro',

                        fontSize: 20.0,

                      ),

                    ),

                  )),