Flutterだけでテトリス作ってみた

第2回Flutter Nightでの登壇資料です。

Transcript

1. F l u t t e r だ け で テ ト リ ス 作 っ て み た F lu t t e r N i ght ���� 年 �� 月 �� 日 Aoi Umigishi
2. アジェンダ �. 自己紹介 �. 作成したテトリスの紹介 �. 作成ポイント a. テトリスのモデル化 b. キーボード入力 c. 状態管理 �. まとめ
3. 名前： Aoi Umigishi ( 東 優太 ) SNS 等： 職業： フリーランスエンジニア (Flutter/TypeScript) 趣味：音楽、ゲーム、 etc ... 自己紹介
4. 作成したテトリスの紹介
5. 作成したテトリスの紹介 特徴： 特徴： �rd Party のパッケージを不使用！
6. 作成ポイント ・テトリスのモデル化 [(false , 黒 ), (true , 紫 ), (false , 黒 )], [(true , 紫 ), (true , 紫 ), (true , 紫 )] [ ] List<List<PanelModel>> ブロックを PanelModel でモデル化 ブロックを PanelModel でモデル化
7. 作成ポイント ・テトリスのモデル化 移動のロジック 移動後の Block の位置に hasBlock = true のものがないか チェック なければ移動を実行
8. 作成ポイント ・テトリスのモデル化 移動のロジック 移動後の Block の位置に hasBlock = true のものがないか チェック あれば移動しない
9. 作成ポイント ・キーボード入力 https://docs.flutter.dev/ui/ interactivity/actions-and-shortcuts Shortcuts, Actions, Focus の � つの Widget で実現
10. 作成ポイント ・キーボード入力
11. 作成ポイント ・状態管理 親 ゲーム画面 ボタン FieldState 課題 : ゲーム画面の状態をボタンから操作したい currentMino
12. 作成ポイント ・状態管理 親 ゲーム画面 ボタン FieldState 課題 : ゲーム画面の状態をボタンから操作したい
13. 作成ポイント ・状態管理 (StatefulWidget) ゲーム画面 ボタン FieldState 解決方法 : InheritedWidget の利用 TetrisController down (InheritedWidget) _InheritedTetris TetrisController.of(context).fieldState TetrisController.of(context).down
14. ・Flutter だけでテトリスを作りました ・パッケージを使わずとも標準 API で色々できます まとめ ・でも、パッケージはやっぱり便利。感謝。 ・他にも Dart � の List.indexed とか活用してます ・ リポジトリ見てください！
15. ご清聴ありがとうございました！