年末年始にFlutter入門

@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は導入が簡単!! ﬁrebase_coreを追加しましょう 17

@nano72mkn FlutterFireは導入が簡単!! FlutterFireのコマンドラインを追加しましょう 18

@nano72mkn FlutterFireは導入が簡単!! 以上 19

@nano72mkn 20 FlutterFireで Firebaseの導入が簡単すぎた

@nano72mkn FlutterFireはFirebase連携も簡単!! Firebaseのプロジェクトとプラットフォームを選択し、 bundleIdを指定してあげるだけ FirebaseのOptionが含まれたﬁrebase_options.dartが作成されます。 21

@nano72mkn FlutterFireはFirebase連携も簡単!! main.dartに - ﬁrebase_core - ﬁrebase_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 を使用し、 providerConﬁgs を設定するだけでページが完成。

@nano72mkn ログイン画面 29 SignInScreen Widget を使用し、 providerConﬁgs を設定するだけでページが完成。

@nano72mkn プロフィール画面 ProﬁleScreen Widget を使用。ログイン画面と同じように providerConﬁgs を設定するだけ 30

@nano72mkn プロフィール画面 ProﬁleScreen Widget を使用。ログイン画面と同じように providerConﬁgs を設定するだけ 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しか勝たん

年末年始にFlutter入門

年末年始にFlutter入門

More Decks by Shota

Other Decks in Programming

Featured

Transcript