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
200
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
130
SliverAppBarはなぜ変化する?~ Sliverを内側から理解する ~
umigishiaoi
0
120
My challenge to add Vision OS support in Flutter
umigishiaoi
0
90
Other Decks in Programming
See All in Programming
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
210
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
6k
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
130
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
660
VS Code Update for GitHub Copilot
74th
2
660
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
ふつうの技術スタックでアート作品を作ってみる
akira888
1
890
XP, Testing and ninja testing
m_seki
3
250
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6.1k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
1
130
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
780
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
BBQ
matthewcrist
89
9.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Optimizing for Happiness
mojombo
379
70k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
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 とか活用してます ・ リポジトリ見てください!
ご清聴ありがとうございました!