[Flutter] 간단한 주사위 굴리기

이러한 형태의 주사위 앱을 만들어본다.

 

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

 

구조도

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

 

github.com/londonappbrewery/dicee-flutter

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

 

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

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

 

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

 

 

Expanded

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

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

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

 

Expanded 위젯을 사용한 모습

 

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 해야 한다.

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

하지만 nextint에 (6)을 넣어주면 0~5까지의 값이 나오게 된다.

 

이렇게 바꿔주면 된다.

 

 

Challenge 1

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

 

Challenge 2

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

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

Challenge 3

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

ChangeDiceFace를 통해 호출한다.

ChangeDiceFace

 

이렇게 간단해진다.

ChangeDiceFace

 

이렇게 간단해진다.