[Flutter] Card & ListTitle & Icon

Flutter Card & ListTitle

---

아래에 더 정확한 설명을 해주는 주소 첨부

---

 

Flutter에는 Card라는 기능이 있습니다. 처음에 Container로 만들었지만 Card로 바꾼 이유는 디자인과 편의성 때문입니다.

카드는 모서리 끝에 약간 둥근 느낌이 있고, Container 처럼 margin과 padding을 줄 수 있습니다.

 

padding을 주는 방법은 제 코드에서 child:Row 부분에서 Alt(Option)키를 누르고 엔터를 치시면 확인 하실 수 있습니다.

 

Flutter Padding 추가하는 방법

 

그리고 간단하게 아이콘과 텍스트 꾸미는 방법을 알아봅시다.

Card(
                  color: Colors.white,
                  margin: EdgeInsets.symmetric(vertical: 10.0,horizontal: 25.0),
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Row(
                      children: <Widget>[
                        Icon(
                          Icons.phone,
                          color: Colors.teal,
                          size: 25,
                        ),
                        Text(
                          '+This is phone number',
                          style: TextStyle(
                              fontFamily: 'Source Sans Pro',
                              fontSize: 20
                          ),

                        )
                      ],

                    ),
                  ),
                )
              ],

  위의 코드를 보면, Icons.phone은 휴대전화 아이콘을 쓰겠다는 뜻 이며, 구글에서 기본적으로 제공하는 이미지 입니다.

margin과 padding을 설명을 해드리자면 사진으로 설명 해드리는 게 나을 거 같아서 사진으로 가져왔습니다.

 

출처 https://coding-factory.tistory.com/187

  오브젝트를 기준으로 2가지로 나뉘어 진다고 생각 하시면 됩니다.

 

 

Flutter 실행 화면

 

반응형

---

그럼 위의 소스코드를 ListTitle로 변경합니다. 그 이유는 보다 편하게 작성을 할 수 있기 때문입니다. ListTitle은 기본적으로 padding과

Colors.white를 제공하고 있습니다.  

 

Card(
                  color: Colors.white,
                  margin: EdgeInsets.symmetric(vertical: 10.0,horizontal: 25.0),

                    child: ListTile(
                      leading: Icon(
                        Icons.phone,
                        color: Colors.teal,
                        size: 25,
                      ),
                    title: Text(
                      '+This is phone number',
                      style: TextStyle(
                          fontFamily: 'Source Sans Pro',
                          fontSize: 20
                      ),
                  ),
                ),
            )

 

 

Flutter 실행 화면

---

그리고 우린 mainAxisAlignment를 알고 있습니다. 그걸 사용 하시면 됩니다. 전체적인 소스코드는

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}
class  MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
        child: Scaffold(
          backgroundColor: Colors.teal,
          body: SafeArea(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                CircleAvatar(
                  radius: 60.0,
                  //backgroundImage : AssetImage('images/img1.jpeg'),
                ),
                Text(
                  "Hi, this is test",
                  style: TextStyle(
                    fontFamily:'Pacifico',
                    fontSize: 30.0,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  )
                ),
                Text(
                  "Thanks Very Much ",
                  style: TextStyle(
                    fontFamily: 'Source Sans Pro',
                    fontSize: 15,
                    color: Colors.teal[100],
                    letterSpacing: 2.5
                  )
                ),

                Card(
                  color: Colors.white,
                  margin: EdgeInsets.symmetric(vertical: 10.0,horizontal: 25.0),

                  child: ListTile(
                    leading: Icon(
                      Icons.phone,
                      color: Colors.teal,
                      size: 25,
                    ),
                    title: Text(
                      '+This is phone number',
                      style: TextStyle(
                          fontFamily: 'Source Sans Pro',
                          fontSize: 20
                      ),
                    ),
                  ),
                ),
                Card(
                  color: Colors.white,
                  margin: EdgeInsets.symmetric(vertical: 10.0,horizontal: 25.0),

                    child: ListTile(
                      leading: Icon(
                        Icons.phone,
                        color: Colors.teal,
                        size: 25,
                      ),
                    title: Text(
                      '+This is phone number',
                      style: TextStyle(
                          fontFamily: 'Source Sans Pro',
                          fontSize: 20
                      ),
                  ),
                ),
            )
          ],
          )),
        ),
      )
    );
  }
}

반응형

Flutter 최종 화면

 

내가 안까먹기 위해서 계속 기록을 해야겠다!!! 하하하하하핳

 

---

 

ListTitle

ListTile class - material library - Dart API

 

Card

Card class - material library - Dart API

 

Icon

Icon class - widgets library - Dart API