[Flutter - 1team]섹션 7 : Dicee - Building Apps with State

이번 강의에서는 주사위 앱을 만든다.

 

완성된 주사위 앱의 모습이다.

 

구조도

이번에 만들 앱의 구조도이다.

 

github.com/londonappbrewery/dicee-flutter

우선 깃에서 클론을 받아온다.

 

기본적으로 AppBar, App Icon, background color 등이 미리 설정이 되어있다.

이제 여기에 주사위 이미지를 추가해보자

 

알 수 없는 이미지가 나타났다 😮

✏️왜 그런지 한번 생각해보자.

이미지가 화면보다 크기 때문에 노란색과 검은색이 교차된 이상한 이미지가 나타난다.

 

Expanded

여기서 Expanded 위젯이 사용된다.

Expanded 위젯은 자식이 사용 가능한 공간을 채우도록 행, 열 또는 

유한한 영역의 자식을 확장하는 위젯이다.

 

Expanded 위젯을 사용한 모습

 

Expanded 위젯 코드

Flex

여기서 Flex 😎

Flex는 간단한 방법으로 비율을 조정할 수 있다.

 

디폴트 값은 1로 위의 사진과 같다.

아래는 12:5 비율이다.

 

padding

이제 답답해 보이는 주사위 사진에 여백을 줄 차례이다.

 

 

참고로 위의 이미지는 16.0의 패딩 값을 주었다.

FlatButton

FlatButton은 버튼의 모양이 없다.

 

FlatButton을 적용했더니 이미지가 작아졌다.

✏️왜 그런지 한번 생각해보자.

 

FlatButton에 default 값으로 padding 값이 설정되어있기 때문이다.

아까 추가했던 패딩값을 빼주도록 하자.

 

onPressed

FlatButton에 노란 줄은 무엇일까?

 

onPressed가 없기 때문이다.

 

onPressed는 FlatButton에서 눌림 이벤트를 지정할 수 있는 속성이다.

-javascript와 비슷하다고 하는데 필자는 사용해본 적 없어 잘 모르겠다.

이런 식으로 사용 가능하다 () 안에는 인자를, {} 안에는 실제 이벤트가 일어났을 때의 로직을 작성할 수 있다.

print문을 이용해 실제로 잘 작동하는지 알아보자.

Debug 창을 보자.

잘 작동하는 것을 볼 수 있다.

 

RandomNumber

RandomNumber를 사용하기 위해서는 'dart:math'를 import 해야 한다.

위 사진과 같이 사용하면 된다.

하지만 이 코드에는 한 가지 오류(?)가 존재한다.

✏️어디가 문제인지 한 번 생각해보자.

hint : 이미지가 사라졌다?!

그렇다.

플러터 역시 0부터 시작한다.

(6)은 0에서부터 5까지의 숫자가 랜덤 된다.

(6) + 1을 통해 1~6까지의 숫자를 뽑아주자.

 

Challenge 1

Challenge 1은 오른쪽 이미지도 왼쪽 이미지와 같이 랜덤을 적용해주는 것이다.

 

Challenge 2

Challenge 2는 왼쪽 이미지를 누르면 왼쪽 이미지와 오른쪽 이미지가 동시에 바뀌고,

오른쪽 이미지를 눌러도 왼쪽 이미지와 오른쪽 이미지가 동시에 바뀌는 앱을 만드는 것이다.

Challenge 3

Challenge 3은 ChangeDiceFace라는 함수를 추가해 onPressed 안의 반복되는 내용을

ChangeDiceFace를 통해 호출한다.

ChangeDiceFace

 

이렇게 간단해진다.