3.0 Header

---

body: Column(
          children: [
            Row(
              children: [
                Column(
                  children: [
                    Text("Hey Cahn"),
                    Text("welcome Back"),
                  ],
                )
              ],
            )
          ],
        ),

Column 안에 Row안에 Column안에 Text를 배치하기 위해 위와 같이 코드를 작성했다.

Column(
                  children: [
                    Text(
                      "Hey Cahn",
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                    Text(
                      "welcome Back",
                      style: TextStyle(color: Colors.white),
                    ),
                  ],
                )

위와같이 색상코드까지 다 줘도

모서리에 박혀있다.
그렇기에 SizedBox를 줘보자

SizedBox(
              height: 80,
            ),

그러면 위와 같이 내려온다!

mainAxisAlignment: MainAxisAlignment.end 를 통해서

SizedBox(
              height: 80,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [

오른쪽 끝으로 보낼 수 있다!

Text(
                      "Hey Cahn",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 38,
                        fontWeight: FontWeight.w600,
                      ),
                    ),

이와 같이 text크기를 키워주고 가운데 정렬을 해제해서 오른쪽으로 수평을 맞추고싶다

crossAxisAlignment: CrossAxisAlignment.end,

을 Column에 추가해주면

원하느데로 오른쪽 정렬이 가능하다

color: Colors.white.withOpacity(0.8)

투명도는 위와 같이

backgroundColor: Color(0xFF181818),

배경은 이와 같이 0xFF 뒤에 붙여주면된다.

Color.fromARGB 라는 방법도 있다.

그런데 지금 너무 화면에 붙어있다… Padding을 주자!

body: Padding(
          padding: EdgeInsets.all(20),
          child: Column(
            children: [
              SizedBox(
                height: 80,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text(
                        "Hey Chan",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 28,
                          fontWeight: FontWeight.w800,
                        ),
                      ),
                      Text(
                        "welcome Back",
                        style: TextStyle(
                          color: Colors.white.withOpacity(0.8),
                          fontSize: 18,
                        ),
                      ),
                    ],
                  )
                ],
              )
            ],
          ),
        ),

위와같이 padding을 줄 수 있다.

padding: EdgeInsets.all(20),

all은 상하좌우 다 준다고 보면 된다.

padding: EdgeInsets.symmetric(horizontal: 40),

horizontal에 40만큼의 간격을 주자

정리하자면

서로를 위아래로 놓고 싶을때는 Column

• mainAxis : 세로 방향
• CrossAxis : 가로 방향

서로를 옆에 놓고 싶을 때는 Row

• mainAxis : 가로 방향
• CorssAxis : 세로 방향

3.1 Developer Tools

---

Widget Tree

개발자 튤로 가이드라인을 볼 수있다.

3.2 Buttons Section

---

재사용 가능한 위젯을 만들어보자!

// 두번째 자식
              SizedBox(
                height: 120,
              ),
              // 세번째 자식
              Text(
                "Total Balance",
                style: TextStyle(
                  fontSize: 22,
                  color: Colors.white.withOpacity(0.8),
                ),
              ),

column의 다음 자식들을 넣고

crossAxisAlignment: CrossAxisAlignment.start,

정렬하자

// 4번째 자식
              SizedBox(
                height: 5,
              ),
              // 5번째 자식
              Text(
                "\$5 194 482",
                style: TextStyle(
                  fontSize: 48,
                  color: Colors.white,
                  fontWeight: FontWeight.w600,
                ),
              ),

그 후 위와 같이 sizebox를 넣고 숫자를 나타내면 된다.

이제 버튼을 만들자

Container 는 html 의 div라고 보면 된다.

// 6번째 자식
              SizedBox(
                height: 30,
              ),
              Row(
                children: [
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.amber,
                      borderRadius: BorderRadius.circular(45),
                    ),
                    child: Padding(
                      padding: EdgeInsets.symmetric(
                        vertical: 20,
                        horizontal: 50,
                      ),
                      child: Text(
                        "Transfer",
                        style: TextStyle(
                          fontSize: 20,
                        ),
                      ),
                    ),
                  )
                ],
              )

버튼은 Row로 주고 Row내에서 Childern을 Container를 통해 만들어줬다.

Container는 Padding을 가지고, 내부 Text를 가진다.

박스 꾸미는건 BoxDecoration을 이용하면 된다.

• 즉, Row안에 Cotainer안에 decoration, child:Padding, child: Text가 있다고 보면 된다.