Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutterだけでテトリス作ってみた
Search
Aoi Umigishi
February 29, 2024
Programming
0
190
Flutterだけでテトリス作ってみた
第2回Flutter Nightでの登壇資料です。
Aoi Umigishi
February 29, 2024
Tweet
Share
More Decks by Aoi Umigishi
See All by Aoi Umigishi
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
5
SliverAppBarはなぜ変化する?~ Sliverを内側から理解する ~
umigishiaoi
0
120
My challenge to add Vision OS support in Flutter
umigishiaoi
0
88
Other Decks in Programming
See All in Programming
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
240
童醫院敏捷轉型的實踐經驗
cclai999
0
190
XP, Testing and ninja testing
m_seki
3
200
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
140
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
480
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
460
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
530
XSLTで作るBrainfuck処理系
makki_d
0
210
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
280
Deep Dive into ~/.claude/projects
hiragram
9
1.6k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.4k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Agile that works and the tools we love
rasmusluckow
329
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Rails Girls Zürich Keynote
gr2m
94
14k
Raft: Consensus for Rubyists
vanstee
140
7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Unsuck your backbone
ammeep
671
58k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Transcript
F l u t t e r だ け で
テ ト リ ス 作 っ て み た F lu t t e r N i ght ���� 年 �� 月 �� 日 Aoi Umigishi
アジェンダ �. 自己紹介 �. 作成したテトリスの紹介 �. 作成ポイント a. テトリスのモデル化 b.
キーボード入力 c. 状態管理 �. まとめ
名前: Aoi Umigishi ( 東 優太 ) SNS 等: 職業:
フリーランスエンジニア (Flutter/TypeScript) 趣味:音楽、ゲーム、 etc ... 自己紹介
作成したテトリスの紹介
作成したテトリスの紹介 特徴: 特徴: �rd Party のパッケージを不使用!
作成ポイント ・テトリスのモデル化 [(false , 黒 ), (true , 紫 ),
(false , 黒 )], [(true , 紫 ), (true , 紫 ), (true , 紫 )] [ ] List<List<PanelModel>> ブロックを PanelModel でモデル化 ブロックを PanelModel でモデル化
作成ポイント ・テトリスのモデル化 移動のロジック 移動後の Block の位置に hasBlock = true のものがないか
チェック なければ移動を実行
作成ポイント ・テトリスのモデル化 移動のロジック 移動後の Block の位置に hasBlock = true のものがないか
チェック あれば移動しない
作成ポイント ・キーボード入力 https://docs.flutter.dev/ui/ interactivity/actions-and-shortcuts Shortcuts, Actions, Focus の � つの
Widget で実現
作成ポイント ・キーボード入力
作成ポイント ・状態管理 親 ゲーム画面 ボタン FieldState 課題 : ゲーム画面の状態をボタンから操作したい currentMino
作成ポイント ・状態管理 親 ゲーム画面 ボタン FieldState 課題 : ゲーム画面の状態をボタンから操作したい
作成ポイント ・状態管理 (StatefulWidget) ゲーム画面 ボタン FieldState 解決方法 : InheritedWidget の利用
TetrisController down (InheritedWidget) _InheritedTetris TetrisController.of(context).fieldState TetrisController.of(context).down
・Flutter だけでテトリスを作りました ・パッケージを使わずとも標準 API で色々できます まとめ ・でも、パッケージはやっぱり便利。感謝。 ・他にも Dart �
の List.indexed とか活用してます ・ リポジトリ見てください!
ご清聴ありがとうございました!