Flutter _ Header

230518

 

 

---

 

자 이제 Flutter는 Widget으로 이루어져 있고

어떻게 사용되는지 확인 했으니

 

실제로 무언가를 만들어보자.

 

https://dribbble.com/shots/19858341

Financial Mobile IOS App

위 사이트의 디자인을 참고해 만들어 보겠다.

 

---

위 사진과 같은

디자인을 만들기 위해 

 

우선 배경 부터 건들어 보겠다.

 

---

1. Background Color

 

배경은 Scaffold의

Color? backgroundColor를 사용하면 된다.

 

위 코드와 같이

backgroundColor에서

Colors에 색을 입힐 수 있다.

 

.method로

옵션 설정이 가능하다.

 

 

---

하지만 우리가 원하는 것은

검은 배경이므로

 

위와같이 black으로 바꿔 주었다.

 

---

2. Column

다음으로 해야 할것은

화면에 보이는 UI들이

 

전부 수직으로 쌓여있다.

 

위 UI들을 표로 생각하면

1열에 다수의 행이 있는것이다.

 

즉, body의 요소들이 쌓여있는 모습이

표의 1열 N행의 모습이고

body의 요소 중 Column을 사용해보겠다.

 

위의 앱을 보면

크게 총 3개의 열(row)이 있다.

 

1열을 자세히 보면

Text가 또 쌓여있음으로

 

각각의 Text는

1-1열, 1-2열로 나뉜다.

 

위의 주석과 코드, 실제 앱의 구조까지 비교하면서 보면

이해하기 쉽다.

 

자 이제 Text는 만들었고

중요한건 검은색 배경이니

글씨 색을 바꿔야 할것 같다.

---

2-1 TextStyle

 

Text의 위젯 중에 TextStyle이 있고

 

 

위와 같이 TextStyle의

color을 사용하여 글자 색을 바꿀 수 있다.

 

 

 

글씨 색이 바뀌었는데

위치가 너무 안좋다.

 

---

2-2 SizedBox

 

SizedBox란

빈 공간을 의미한다.

 

 

우리의 Text가 더 잘보이기위해

위에 공간을 넣어줄 것이다.

 

그리고 SizedBox는

width와 height를 필요로 한다.

 

height에 80을 주면?

정정 : SizedBox는 시계 아래 부분부터 입니다.

위와 같이 Text위에

 

height 80 만큼의 공간이 생겨

Text가 밀려났다.

 

이제 밀려난 Text를 오른쪽으로 정렬해보자.

 

---

2-3 Alignment (정렬)

 

우리는 첫 번째 Row(행)을

오른쪽으로 정렬해야하기에

첫 번째 Row를 확인해봐야한다.

 

Alignment에는

 

MainAxisAlignment와

CrossAxisAlignment가 있는데

 

 

Row에서는

MainAxisAlignment는 수평 방향,

CrossAxisAlignment는 수직 방향이다.

 

💡 Column Alignment

 

MainAxisAlignment는 수직 방향이다.

CrossAxisAlignment는 수평 방향이다.

 

Axis를 축이라고 생각하면 이해하기 쉽다.

 

1행에

MainAxisAlignment.end(끝)을

적용하면?

 

위와 같이

행의 끝쪽으로 간것을 확인할 수 있다.

 

이제 글씨 크기와 굵기를 조정해보자.

---

2-4 Font Size,Weight

 

TextStyle을 확인해보니

FontWeight와 FontStyle이 있다.

 

fontSize는 38,

fontWeight는 w600만큼 줘보자.

 

위와 같이 크기와 굵기가 바뀌었다.

 

하지만 굉장히 불편하게

Text가 중앙 정렬이 되어있는데

 

현재 Text는 1행의 1열에 존재하고

그렇다면 1행을 끝으로 배치시킨것처럼

1행 1열 또한 끝으로 배치시키면 된다.

 

 

위와 같이

1행도 끝에 배치.

1행 1열도 끝에 배치시켰다.

 

자 이제 

Welcome back이라는

2번째 Text를 꾸밀 차례이다.

---

2-5 withOpacity

 

 

2번째 Text의 글자 색은

흰색에서 투명도가 있어 보인다.

 

2번째 Text에 .을 찍어보면

method가 주르륵 나오는데,

 

withOpacity()라는게 있다.

withOpacity()는 opacity(불투명도)를 명시하도록 해준다.

 

조금 약간의 값들의 수정이 있었지만

위와 같이 투명도와 글씨 크기를 조정해 주었더니

 

잘 맞춰준것 같다.

 

이제보니 배경색이 조금 다른데

홈페이지에 있는

색상 정보를 참고하여

 

좀 더 디테일하게 배경색을 조정할 수 있다.

 

Colors ▶ Color로 바꾸고

인자값으로 색상 값을 전달 하는데,

# 대신에 0xFF로 바꿔서 전달하면 된다.

 

 

이제는 정말 비슷해진것을 확인할 수 있다.

 

 

현재 왼쪽 기준 모델은

텍스트와 프레임간의 공간이 있는데,

우리는 딱 붙어 있다.

 

다음으로는 padding을 알아보자.

 

---

2-6 Padding

 

padding이란 여백을 의미한다.

우리가 만든 것들에 여백을 주려면

 

body요소에 padding을 주면된다.

 

 

 

body 의 Padding이라는 위젯의

child(요소)에

우리가 만든 메인 Column 전부를 넣어 주면 된다.

 

 

Padding은 EdgeInsets라는 위젯으로

위와 같이 옵션을 설정할 수 있는데

 

all이란 모든 방향을 뜻한다.

 

💡추가 Padding 옵션

 

EdgeInsets.symmetric()

▶ 수직과, 수평 패딩을 줄 수 있다.

 

EdgeInsets.only()

▶ 상, 하, 좌, 우 패딩을 줄 수 있다.

 

수평(가로) 패딩으로 40을 주면

 

위와 같이 텍스트에 패딩이 생긴다.