플러터에서 앱 화면 구동까지 딜레이 주기 (카운트 다운)

플러터로 가위바위보 게임을 만들고 있습니다. 우선 가위, 바위, 보 중에서 하나를 누르면 선택지가 입력되어 게임이 진행되는 구조인데요. 채점하는 동안 선택지를 더 못고르게 DateTime() 함수로 2초 동안 못고르게 만들었습니다. 그런데 구조적인 문제로 인해 화면이 로딩되고나서 무심코 유저들이 가위, 바위, 보를 탭하다보면 2초간 못고르게 된게 화면 로드할때부터 효력이 있어서 이것저것 누르다보면 UI에 대한 신뢰감이 저하됩니다.

그래서 화면 로드 후 첫로드일때만 3초간 딜레이를 주고 있습니다. 3초부터 0초까지 카운트 다운 합니다.

우선 아래와 같은 코드면 됩니다.

late Timer? _timer;
int count = 3;

void initCountDown() {
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
        if (timer.tick == 0) {
            setState(() {
                count = 3;
            });
        }
        if (timer.tick == 1) {
            setState(() {
                count = 2;
            });
        }
        if (timer.tick == 2) {
            setState(() {
                count = 1;
            });
        }
        if (timer.tick == 3) {
            setState(() {
                count = 0;
            });
            _timer?.cancel();
        }
    }
}

코드에서 중요한 것은 _timer 변수를 Timer? 타입으로 지정하고 Timer.periodic(duration) 객체를 담아 1초 간격으로 tick해서 적절한 처리를 하는 원리입니다. _timer 변수는 Timer 객체를 담고, 인자로 주어지는 timer로 tick을 조사합니다. tick은 0부터 시작해서 이 함수에서는 1초 간격으로 늘어나는데, 이를 조건문으로 검사해서 setState() 로 갱신해줍니다.

이렇게 실행하면 UI에서

Text('시작하기까지 $counter 초 남았습니다')

처럼 해둔 위젯에 표시가 갱신됩니다.

이렇게 만든 initCountDown()을 initState() 함수에 기재합니다.

@override
initState() {
    super.initState();
    initCountDown();
}

이 위치 이외에 build() 함수 등에 두면 갱신시마다 initCountDown() 이 실행되어 $counter 부분이 점멸하니 반드시 initState()에서 실행하여 화면 갱신되어도 두번 다시 실행되지 않게 합니다.