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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Shota
January 22, 2022
Programming
330
0
Share
年末年始にFlutter入門
FlutterFireで爆速開発しました!
Shota
January 22, 2022
More Decks by Shota
See All by Shota
おじいちゃんに優しいUIをつくってみた
nano72mkn
2
1.9k
フロントエンドのテストからアクセシビリティをしれっと広めていく
nano72mkn
3
1.1k
アクセシビリティを理解するとフロントエンドのテストが楽になる!
nano72mkn
1
4.3k
OpenAI APIを触ってみた
nano72mkn
0
1.3k
Other Decks in Programming
See All in Programming
의존성 주입과 모듈화
fornewid
0
140
CursorとClaudeCodeとCodexとOpenCodeを実際に比較してみた
terisuke
1
470
Vibe하게 만드는 Flutter GenUI App With ADK , 박제창, BWAI Incheon 2026
itsmedreamwalker
0
550
10年分の技術的負債、完済へ ― Claude Code主導のAI駆動開発でスポーツブルを丸ごとリプレイスした話
takuya_houshima
0
2.6k
Oxlintとeslint-plugin-react-hooks 明日から始められそう?
t6adev
0
270
ハンズオンで学ぶクラウドネイティブ
tatsukiminami
0
130
第3木曜LT会 #28
tinykitten
PRO
0
110
Spec Driven Development | AI Summit Vilnius
danielsogl
PRO
1
100
ドメインイベントでビジネスロジックを解きほぐす #phpcon_odawara
kajitack
3
780
セグメントとターゲットを意識するプロポーザルの書き方 〜採択の鍵は、誰に刺すかを見極めるマーケティング戦略にある〜
m3m0r7
PRO
0
550
「Linuxサーバー構築標準教科書」を読んでみた #ツナギメオフライン.7
akase244
0
1.4k
tRPCの概要と少しだけパフォーマンス
misoton665
2
210
Featured
See All Featured
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
110
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
180
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.4k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
710
Designing Experiences People Love
moore
143
24k
Tell your own story through comics
letsgokoyo
1
900
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
510
Everyday Curiosity
cassininazir
0
200
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
440
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
320
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
530
Transcript
@nano72mkn 年末年始でFlutterに入門! 年末年始に勉強したLT @nano72mkn
@nano72mkn 自己紹介 宮平 将汰(@nano72mkn) Web エンジニア - アプリつくるの大好き人間 - React
Nativeでアプリを作ったことあり 2
@nano72mkn 1. 年末年始にアプリ作った 2. FlutterFire最高 おしながき 3
@nano72mkn 年末年始にアプリ作った 4
@nano72mkn One Line Diary 5 日記のハードルを 極力さげた日記アプリ 「Twitterのように手軽に日記をつけよう!」
@nano72mkn 6 このアプリ たったの4画面
@nano72mkn たったの 4 画面 1. ログイン 7
@nano72mkn たったの 4 画面 1. ログイン 2. 日記一覧 8
@nano72mkn たったの 4 画面 1. ログイン 2. 日記一覧 3. 日記追加
9
@nano72mkn たったの 4 画面 1. ログイン 2. 日記一覧 3. 日記追加
4. プロフィール画面 10
@nano72mkn 11 めっちゃ ミニマムスタート
@nano72mkn 12 開発期間 たったの1週間 リリースには追加で2日ほどかかっています。
@nano72mkn 開発1週間の内訳 12/25 Flutterをinstallだけして寝る 12/26 FlutterFireでFirebase導入 12/27 ログイン画面追加 12/28 日記一覧/保存機能追加 12/29 実機で動作テスト 12/30 アイコンを追加するなど申請準備 12/31 Appleに申請を出す 13
@nano72mkn ありがとう、FlutterFire 14
@nano72mkn FlutterFireとは? Firebaseが公式で出している Flutter と Firebase の連携をしてくれる便利 ツール 15 安直なロゴ
@nano72mkn 16 FlutterFireの導入 が簡単すぎた
@nano72mkn FlutterFireは導入が簡単!! firebase_coreを追加しましょう 17
@nano72mkn FlutterFireは導入が簡単!! FlutterFireのコマンドラインを追加しましょう 18
@nano72mkn FlutterFireは導入が簡単!! 以上 19
@nano72mkn 20 FlutterFireで Firebaseの導入 が簡単すぎた
@nano72mkn FlutterFireはFirebase連携も簡単!! Firebaseのプロジェクト と プラットフォーム を選択し、 bundleIdを指定してあげるだけ FirebaseのOptionが含まれたfirebase_options.dartが作成されます。 21
@nano72mkn FlutterFireはFirebase連携も簡単!! main.dartに - firebase_core - firebase_options.dart をimportし、 initializeAppを追加 22
@nano72mkn FlutterFireはFirebase連携も簡単!! 以上 23
@nano72mkn 24 FlutterFire UI もすごかった
@nano72mkn FlutterFire UIがすごかった 25 1. ログイン 2. 日記一覧 3. 日記追加
4. プロフィール画面
@nano72mkn FlutterFire UIがすごかった 26 1. ログイン 2. 日記一覧 3. 日記追加
4. プロフィール画面
@nano72mkn 27 Flutter Fire UI で作ってます
@nano72mkn ログイン画面 28 SignInScreen Widget を使用し、 providerConfigs を設定するだけで ページが完成。
@nano72mkn ログイン画面 29 SignInScreen Widget を使用し、 providerConfigs を設定するだけで ページが完成。
@nano72mkn プロフィール画面 ProfileScreen Widget を使用。 ログイン画面と同じように providerConfigs を設定するだけ 30
@nano72mkn プロフィール画面 ProfileScreen Widget を使用。 ログイン画面と同じように providerConfigs を設定するだけ 31
@nano72mkn 日記一覧画面 FirestoreListView を使用。 queryを指定し、 itemBuilderは普通のListViewと同じ ように指定してあげるだけ 32
@nano72mkn 日記一覧画面 FirestoreListView を使用。 queryを指定し、 itemBuilderは普通のListViewと同じ ように指定してあげるだけ 33
@nano72mkn さいごに 34
@nano72mkn さいごに - FlutterFireあればすぐ開発できるので 初心者の人も使ってみてね - One Line Diary は
iOS / Android でリリースされています! (ぜひ!) 35 こんな感じで デザイン調整した
@nano72mkn 36 FlutterFireしか勝たん