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
Shota
January 22, 2022
Programming
0
260
年末年始にFlutter入門
FlutterFireで爆速開発しました!
Shota
January 22, 2022
Tweet
Share
More Decks by Shota
See All by Shota
フロントエンドのテストからアクセシビリティをしれっと広めていく
nano72mkn
3
970
アクセシビリティを理解するとフロントエンドのテストが楽になる!
nano72mkn
1
4k
OpenAI APIを触ってみた
nano72mkn
0
1.2k
Other Decks in Programming
See All in Programming
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
480
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
16
2.1k
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
260
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
710
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
290
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
0
690
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
C++20 射影変換
faithandbrave
0
560
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
890
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
6
5.4k
Featured
See All Featured
It's Worth the Effort
3n
185
28k
How GitHub (no longer) Works
holman
314
140k
Designing for humans not robots
tammielis
253
25k
Unsuck your backbone
ammeep
671
58k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Designing for Performance
lara
609
69k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
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しか勝たん