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
140
SliverAppBarはなぜ変化する?~ Sliverを内側から理解する ~
umigishiaoi
0
120
My challenge to add Vision OS support in Flutter
umigishiaoi
0
92
Other Decks in Programming
See All in Programming
QA x AIエコシステム段階構築作戦
osu
0
220
20250708_JAWS_opscdk
takuyay0ne
2
150
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
35
10k
React 使いじゃなくても知っておきたい教養としての React
oukayuka
14
3.8k
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
730
Comparing decimals in Swift Testing
417_72ki
0
120
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
210
Go製CLIツールをnpmで配布するには
syumai
0
790
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
170
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
370
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
380
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
It's Worth the Effort
3n
185
28k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
860
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
GitHub's CSS Performance
jonrohan
1031
460k
GraphQLとの向き合い方2022年版
quramy
49
14k
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 とか活用してます ・ リポジトリ見てください!
ご清聴ありがとうございました!