Flutter로 빙고 게임을 했어요.

이미 몇 년 전의 일이다. 사회인이 된 첫해에 망년회의 간사를 하고 빙고를 해야 한다.
그때는 빙고 게임 앱을 만들려고 망상해서 깜짝 놀랐지만 그때는 제가 기술이 없어서 보통 구글에서 나오는 걸 썼어요.
이번 플루터의 튜토리얼이 끝나고 무언가를 하고 싶을 때 어렵게 과거에 좌절(혹은 도전하지 않았다)했던 것이 좋았다고 생각해 빙고 게임을 했다.

뭘 했어?

아래에서 테스트할 수 있습니다.
https://hidden-savannah-21194.herokuapp.com/
1~75의 숫자를 무작위로 출력하고 클릭하면 그 숫자는 선택항목이 없고 75번을 누르면'끝'이 되는 간단한 방법이다.
누르는 숫자가 아래에 남아있기 때문에 시간을 확인하는 데도 쓸 수 있다.

애초에 이런 설계도였어요.
하기 전에 빙고가 1~75밖에 안 나오는 줄 몰랐어요. "100원 정도?"내 생각엔

UI가 좀 그래요.

75번 누르고 나면 이런 느낌이야.

시간이 다 돼서 조정할 기분이 아닌데 솔직히 좀 안 좋은 것 같아요.

룰렛의 숫자를 눌렀을 때 아래 목록에 추가된 순서를 알 수 없음

↑의 원인으로 인해 자신이 클릭한 숫자를 모르는 경우는 드물다

빙고 화면에서 시작 화면으로 돌아갈 때 대화상자를 확인하려면

그러나 중간 문제에서 휠체어 단추의 왼쪽에 앞의 숫자를 표시하기만 하면 쉽게 이해할 수 있다
그렇게 대처하면 내구성이 있지 않을까 싶어요.
(빙고 게임도 있기 때문에 장식과 효과를 더해 분위기를 더 고조시키고 싶다.)
원하는 사람이 있다면 ↓ 소스를 여기에 두고 마음대로 변경해서 사용하세요.
https://github.com/0si43/bingo

Fluter의 "강력함"

이번에는 디자인 환경으로 Heroku에게 주었을 뿐이지만 제 개발 환경과 같은 응용 프로그램은 iOS/Android/macOS/웹의 네 가지 환경에서 구축되었습니다.

iOS

Android

macOS

비록 이번 응용 프로그램은 비즈니스용이 아니지만, 정말 비즈니스용으로 쓰면 좋겠다.

Dart가 좀 그래요.

개발 중인 세부 사항은 ↓의 스크랩에 쓰여 있다.
https://zenn.dev/st43/scraps/d410d6f307f9f7
뒤돌아보니 Dart의 기법은 끝까지 적합하지 않다고 느꼈다.
현대의 프로그래밍 언어로 할 수 있는 일은 기본적으로 다 할 수 있지만 늘 좀 빈약하다고 느낀다.
스위프트랑 비교해서 그런가?
이번 개발에서 코드가 복잡한 부분은 대개 ↓

  Widget _buildRow(int start, int end) {
    var _filtered =
        _saved.where((element) => start <= element && element <= end).toList();
    _filtered.sort();
    return Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: _filtered.map((e) => Text(e.toString())).toList());
  }

Filter 처리는where로 써도 약간의 위화감이 있지만 물지 않도록toList()하면List 돌려주지 않을 거예요.sort() 자체를 변경하기 때문에 배열을 한 번 복사해야 합니다.
정렬의 배열 방법을 되돌려 주고 싶습니다.

Heroku에 대한 Fluter 응용 프로그램의 디자인

맞다. 맞다.까먹을 뻔했네.
Fluter 응용 프로그램의 Heroku 프로그램은 다음과 같은 내용을 사용합니다.
https://github.com/diezep/heroku-buildpack-flutter
이런 명령이 완성됐습니다.

heroku login --interactive
heroku create
heroku buildpacks:set diezep/flutter -a <heroku-app-name>
git push heroku main

Fluter가 사용하는 동력은 핸드폰에 대응하는 것 같아서 Heroku가 디자인할 필요도 없고...