ポケモンしりとりを作りながらFlutterに入門します。
この記事を書こうと思ったきっかけ
- Flutterに入門したい
- ポケモンバイオレットを買ったのでポケモン関連で何か作りたい
作りたいもの
【ポケモンしりとり】
仕様は下記のような感じをイメージしています。
- ボタンを押してスタート
- 最初にランダムにポケモンの名前と画像が出る
- 音声入力でしりとりしていく
- 制限時間は1匹10秒以内
- 正解するとポイントが貯まる
- ポケモンによって獲得できるポイントが変わる
※1人でやるしりとりです
動作環境
- Mac OS X: 13.0 Ventura
- Flutter: 3.3.8
- Dart: 2.18.4
- Xcode: 14.1
- Android Studio: 2021.3.1 Patch 1 Dolphin
※最初に見たチュートリアルがAndroid StudioだったのでAndroid Studioを使っているのですが、だんだんいつも使っていて慣れているVSCodeでやりたくなってきました。
できたこと・できてないこと
ボタンを押してスタート
とりあえずスタートボタンを押してゲームを始めます。
最初にランダムにポケモンの名前と画像が出る
PokeAPIからランダムにポケモンを取得して表示します。
音声入力でしりとりしていく
まだ途中までしかできていないですが、
Flutterの音声認識パッケージのspeech_to_textを使用して音声入力するようにしました。
また、ポケモンの名前はほぼカタカナのみで、音声入力した文字列のうちカタカナのみを取得したかったので、kana_kitを使用しました。
（「フシギソウ」とかは「不思議そう」とかになってしまっていた）
入力されたポケモンの英語名をPokeAPIに渡してポケモンのデータを取得します。
しりとりのロジックはまだできてないので、音声入力したポケモンが表示されるだけ。
※PokeAPIにはポケモンの英語名を渡さないといけないので、ポケモンの日本語名/英語名をキーバリューに持つMapを作成して、音声入力の値に対応する英語名を渡すようにしています。
制限時間は1匹10秒以内
まだできていない。
正解するとポイントが貯まる
いまは1回正解すると1ポイントが取得されて、画面右上に表示されるようになっています。
※まだしりとりになっていないので、ポケモンが存在すれば正解。
ポケモンによって獲得できるポイントが変わる
これもまだなのですが、ポケモンの世代が新しいほど高得点とかにしようかなと考えてます。
学んだこと
上記を作る中でFlutterの下記のようなことが少しわかってきました。
- Widgetの使い方
- パッケージの使い方
- APIの呼び方
今後やりたいこと
アプリの機能追加としては下記をやってみたいところです。
- デザインをかっこよくする
- 効果音とか出ちゃう
- ログインができる
- ランキングが表示される
また、Flutter入門的には下記についてもう少し調べてみようと思います。
- 状態管理
- ページ遷移
- プッシュ通知
- テスト
- リリースまわり