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
210
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
160
SliverAppBarはなぜ変化する?~ Sliverを内側から理解する ~
umigishiaoi
0
130
My challenge to add Vision OS support in Flutter
umigishiaoi
0
98
Other Decks in Programming
See All in Programming
パスタの技術
yusukebe
1
400
ワープロって実は計算機で
pepepper
2
1.4k
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
920
CSC305 Summer Lecture 06
javiergs
PRO
0
100
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
110
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
兎に角、コードレビュー
mitohato14
0
150
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
210
CSC305 Summer Lecture 12
javiergs
PRO
0
130
Introduction to Git & GitHub
latte72
0
120
tool ディレクティブを導入してみた感想
sgash708
1
150
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
210
Featured
See All Featured
Balancing Empowerment & Direction
lara
2
590
Making the Leap to Tech Lead
cromwellryan
134
9.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
4 Signs Your Business is Dying
shpigford
184
22k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Practical Orchestrator
shlominoach
190
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
It's Worth the Effort
3n
187
28k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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 とか活用してます ・ リポジトリ見てください!
ご清聴ありがとうございました!