Flutter 기본-9. 주사위 게임 페이지- Focus, Expanded, Random, showToast

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다.

https://www.youtube.com/@codingchef

코딩셰프

 

---

앞서 학습한 로그인 페이지와 연결될 주사위 게임 페이지를 만들어본다.

 

 

1. Focus

 

autofocus

TextField상에 커서를 위치하게하여 사용자가 편하게 값을 입력할 수 있도록 하는 기능을 갖는 위젯을 Focus라 한다. 이 기능을 이용하면 여러 TextField가 있을 때 다음 TextField로 이동하는 기능 등을 구현할 수 있다. TextField의 인자값인 autofocus 에 true | false 값을 지정해주면 된다.

 

GetstureDetector

키보드 외 다른 화면을 클릭했을 때, 키보드를 입력창을 벗어날 수 있도록 GestureDetector를 적용한다. GestureDetector는 사용자의 더블 탭, 드래그 등을 감지하여 제어할 수 있도록 지원하는 위젯이다. 앞서 만들었던 SingleChildScrollView를 Wrapping 하고 onTap 속성을 지정할 것이다.

 

위에서 배운 Focus는 context를 따라 개별 Tree로 구성된다. 여기서는 자세한 내용보다는 아래 두 가지 사항에 대해서 간략하게 배우고 적용해본다.

• FocusNode: 포커스를 받는 특정 위젯을 식별
• FocusScope: 포커스를 받는 위젯의 범위를 지정

 

FocusScope로 FocusTree에서 현재 focus 중인 위젯을 검색하고 unfocus() 메서드로 focus를 벗어날 수 있다.

 

 

 

 

2. Image Expanded, Toast

 

이제 주사위 게임을 할 수 있는 dice.dart 페이지를 작성할 것이다. 

 

Image.asset, Expanded

 

두 개의 주사위를 가로로 같은 간격으로 배치하기 위해서 Column/Row에 Expanded로 Image.asset을 적용하였다. Expanded 위젯은 child 요소를 Column 이면 세로로, Row이면 가로로 차지할 수 있는 최대의 공간을 차지하게 만들어준다. 두 개의 주사위 그림 사이에 위치한 SizedBox와 바깥쪽 padding 부분 외에는 Expanded로 이미지를 적용하여 동일한 간격으로 화면상 최대 가로 너비로 주사위 그림들이 표시되도록 하였다.

 

원래는 Image(image: AssetImage('{이미지 경로}') 방식으로 Image를 불러와야 했으나, Image.asset('{이미지 경로}') 방식으로 간단하게 이미지를 불러올 수 있다.

 

 

$variable, Random().nextInt

이미 배운 바 있지만 Image.asset 부분에서 이미지 경로에 $leftDice, $rightDice로 $표시가 적용된 것을 볼 수 있다. 이것은 상위에서 선언한 leftDice, rightDice 변수를 참조하게 만들어주는 것이다. 이렇게 동적으로 이미지 경로가 변경되도록 해서 6개의 주사위 이미지 중 임의로 1개가 렌더링될 수 있도록 한다.

 

이제 아래에 버튼을 눌렀을 때 onPressed/setState에서 leftDice, rightDice 변수값이 변경되도록 한다. 상태값이 변할때 rebuild를 할 수 있도록 setState 메서드를 적용한 것이다. 그리고 Random().nextInt를 사용하여 0~5까지 임의의 숫자가 출력되도록 한 뒤, 1~6까지 출력을 위해 +1을 해주었다. Random 위젯을 이용하기 위해서는 다음 import 구문을 추가해야한다.

import 'dart:math';

 

Fluttertoast.showToast

마지막으로 버튼이 눌러질 때마다 토스트 팝업이 나타나도록 showToast 메서드를 작성하고 onPressed/setState에서 호출하였다. 아래 import 구문을 통해 fluttertoast를 불러오고, Fluttertoast.showToast 문법으로 toast의 속성값들을 정의한다. 여기서 gravity 속성값은 토스트 내 message의 출력 위치를 결정하는 속성 값이다.

import 'package:fluttertoast/fluttertoast.dart';