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
190
年末年始にFlutter入門
FlutterFireで爆速開発しました!
Shota
January 22, 2022
Tweet
Share
More Decks by Shota
See All by Shota
アクセシビリティを理解するとフロントエンドのテストが楽になる!
nano72mkn
1
3.3k
OpenAI APIを触ってみた
nano72mkn
0
1.2k
Other Decks in Programming
See All in Programming
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
How to use Macrobenchmark
veronikapj
0
160
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
[After Kotlin Fest 2024 LT Night @ Sansan] もっともっとKotlinを好きになる!K2 Compiler Pluginで遊んでみよう!
kitakkun
2
260
Temporalを取り巻く仕様を整理する
sajikix
0
110
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
最近追加した型の紹介とその振り返り
aki19035vc
0
170
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
Namespace on read
tagomoris
2
370
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
What the flash - Photography Introduction
edds
65
11k
How to train your dragon (web standard)
notwaldorf
79
5.5k
How GitHub (no longer) Works
holman
305
140k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
The Pragmatic Product Professional
lauravandoore
29
6.1k
YesSQL, Process and Tooling at Scale
rocio
166
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
How to name files
jennybc
67
96k
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しか勝たん