Flutter _ User Interface

230525

 

---

 

오늘은 Pomodoro라는

애플리케이션을 만들어 볼것이다.

 

pomodoro는 생산성 기술인데

25분 일하고 5분 쉬는 것을 말한다.

 

https://www.behance.net/gallery/98918603/POMO-UIKIT?tracking_source=search_projects%7Cpomo+uikit 

POMO | UIKIT

Omar Sharif의 디자인을 사용하여

연습해보겠다.

 

 

---

 

우리가 직접 만들어볼 디자인은

위의 디자인이고

 

홈페이지에 나와있는

색상표를 토대로

 

위와 같이 Theme에 

backgroundColor, Text color, cardColor를 선언했다.

 

그리고 home은 Scaffold 구조로

body에 Center()를 주었다.

 

이렇게 기본적인 준비가 끝났다.

 

---

먼저 할것은

현재 App 클래스를

StatefulWidget ▶ StatelessWidget으로

바꾸는 것이다.

 

위와 같이

코드 작업 표시를 통해

StatelessWidget으로 변환하고

 

그리고 새로운 폴더

lib/screen 을 만든다.

 

그 다음

screen 폴더에HomeScreen이라는 

StatefulWidget을 생성하고

 

메인 코드로 돌아와

buil()의 home을 HomeScreen()으로 바꿔준다.

 

그리고 다시 HomeScreen 코드로 가서

 

HomeScreen의 build()의

return으로 Scaffold를 생성한다.

 

---

1. Flexible

 

이번에 우리는 Column의 children에 있는

Flexible을 사용해 볼것이다.

 

Flexible은 하드 코딩되는 값을 만들게 해주는데

높이와 너비를 지정해주는게 아니라,

UI 비율에 기반해서 더 유연하게 만들 수 있게 해준다.

 

 

 

위와 같이

Column의 children의 Flexible로 

Container를 만들고색을 입혀주었다.

 

각각의 색상이 다른 

Flexible 3개를 만들어 주고

Flexible의 비율을 정해보자.

 

위와 같이

첫 번째 Flexible는 flex : 1,

두 번째 Flexible는 flex : 2,

세 번째 Flexible는 flex : 1, 을 주면 

 

위와 같이 3구역의 Flexible이 색깔별로

출력되는것을 확인할 수 있다.

 

이러한 Flexible의 장점은

정확한 크기를 입력하는 대신

비율을 정했기 때문에

 

화면이 다른 기종에서도

동일한 비율의 화면이 출력된다는 점이다.

 

비율을 시각적으로 보기위해 색을 지정했으나

우리가 만들 앱의 배경색과 다르므로

Scaffold에 배경색을 입혀주자.

 

메인 코드 파일의 Theme에서colorScheme.background를 가져오면?

 

위와 같이 우리가 원했던

배경색으로 적용되었다.

 

내용을 넣어보자.

 

---

 

첫 번째 Flexible의

Container에Text를 넣고color는 Theme의 cardColor을 가져왔다.

 

위와 같이 출력이되는것을 볼 수 있다.

위치가 상당히 불편하니

조정해주자.

 

Container의

정렬과 관련된 property인

 

alignment의 bottomCenter를 이용하여

정렬해준다.

 

이제 우리가 원했던 위치로 온것을

확인할 수 있다.

 

두 번째 flexible로 가보자.

 

두 번째 Flexible은 해당 부분이 될것이다.

 

아주아주 큰 아이콘 두개가 있는데

우선 Play Button을 

만들어 보자.

 

아이콘이 들어갈 자리이므로

굳이  Container를 쓰는 대신 Center로 만들어주고

 

크기, 색상 (Theme.cardColor)

onPressed는 우선 비워놨다.

아이콘은 play_circle_outline을 사용하면 된다.

 

위와 같이 아주 잘 만들어졌다.

 

세 번째 Flexible로 가보자.

 

위와 같이

cardColor색상의 Container를 만들고

그 안에 Column을 만들어

Text 2개를 넣었다.

 

하지만 해당 Container는

전체를 차지하는게 아니라 가운데만 차지하고 있는데

 

이를 해결하기 위해Row로 감싸주자

 

코드 작업 표시로Row로 감싸주면?

 

이번엔 왼쪽으로 붙었다.

 

현재의 상황을

Widget Inspector의

Layout Explorer로 확인해보면

 

Row로 감싼 Container가 왼쪽 끝에 붙어있는 상황이다.

 

우리는 이러한 Container가

화면 오른쪽 끝까지 확장하길 원하므로

Expanded를 사용해보자.

 

---

2. Expanded

 

코드 작업 표시에서

Wrap the Widget을 통해

Expanded로 바꿔주면?

 

이제 세 번째 Flexible이

Container로 꽉 차게 된다.

 

그리고 Colum의 모든 요소들을

가운데 정렬해주자

 

MainAxisAlignment.center를

사용하면?

 

위와 같이 Column이 가운데 정렬이 된다.

 

Text를 꾸며주자.

 

위와 같이 첫 번째 Text를 꾸며주고

두 번째 Text는 fontsize만 더 키워서 

저장하면?

 

잘 나온것 같다.