이번 섹션에서는 도전과제로 질문에 4가지의 답을 랜덤으로 주는 'magic 8ball' 을 만들어보는 도전과제가 나왔다.
완성하면 이렇게 생겼는데, 사실 이건 내가 더 보기 좋게 폰트까지 입혀서 꾸며본거다..!
1단계-
강의에 올려준 github을 클론 받아서 프로젝트를 세팅하는 과제였다.
이건 어렵지 않게 해서 따로 설명할 필요는 없을듯!
2단계-
appbar과 body를 만들어주고, 거기에 색을 입히는 과제였다.
그리고 내가 못봤는데 stateless 위젯도 만들어주라고 나와있더라.. 그래도 다음 단계에서 만들긴 했다!
3단계-
stateful 위젯을 만들고, ball 사진을 중앙에 배치하는 과제였다.
여기서 조금 막혔었는데, stateful 위젯을 만드는 법을 까먹어서 구글링도 해보고 velog에 내가 쓴 글도 찾아보면서 어찌저찌 하긴 했다.
4단계-
Textbutton을 넣어줘 이미지를 클릭할 수 있게 만들고, dart를 써서 이미지를 클릭할때마다 콘솔에 'i got clicked' 를 찍어주는 과제였다.
Textbutton 넣어주는건 이미지를 감싸줘서 쉽게 해결했고, 콘솔에 찍히게 하는건 onpressed를 써서 print 해주니까 바로 됐다.
5단계-
ballnumber이라는 int 타입을 가진 변수를 생성해서 0으로 숫자를 맞춰놓고, dart math 라이브러리를 import해서 랜덤 함수를 써준 다음 ball을 클릭할때마다 콘솔에 숫자가 뜨게 만드는 과제였다.
이건 우선 int ballnumber이라는 변수에 0을 담아주고, onpressed 안에
ballnumber = Random().nextint(4) 를 써준 뒤 print문에 ballnumber 변수를 넣어줘서 쉽게 해결했다.
6단계-
이미지의 번호를 맞추기 위해 ballnumber의 값을 1-5로 설정해주고 setstate를 사용해 이미지가 실제로 변경되도록 해주는 과제였다.
먼저 setstate로 onpressed를 , nextint(4) +1을 써주니까 간단하게 해결됐다.
사실 flutter를 조금 오랜만에 해서 감이 안잡히는 부분도 많았는데, ChatGpt도 잘 사용하고 구글링도 해가면서 과제를 했던 것 같다.
맘같아서는 뚝딱뚝딱 하고싶지만 계속 하다보면 그렇게 될 날이 오겠지...
