Upgrade to Pro — share decks privately, control downloads, hide ads and more …

年末年始にFlutter入門

Shota
January 22, 2022

 年末年始にFlutter入門

FlutterFireで爆速開発しました!

Shota

January 22, 2022
Tweet

More Decks by Shota

Other Decks in Programming

Transcript

  1. @nano72mkn
    年末年始でFlutterに入門!
    年末年始に勉強したLT
    @nano72mkn

    View full-size slide

  2. @nano72mkn
    自己紹介
    宮平 将汰(@nano72mkn)
    Web エンジニア
    - アプリつくるの大好き人間
    - React Nativeでアプリを作ったことあり
    2

    View full-size slide

  3. @nano72mkn
    1. 年末年始にアプリ作った
    2. FlutterFire最高
    おしながき
    3

    View full-size slide

  4. @nano72mkn
    年末年始にアプリ作った
    4

    View full-size slide

  5. @nano72mkn
    One Line Diary
    5
    日記のハードルを
    極力さげた日記アプリ
    「Twitterのように手軽に日記をつけよう!」

    View full-size slide

  6. @nano72mkn 6
    このアプリ
    たったの4画面

    View full-size slide

  7. @nano72mkn
    たったの 4 画面
    1. ログイン
    7

    View full-size slide

  8. @nano72mkn
    たったの 4 画面
    1. ログイン
    2. 日記一覧
    8

    View full-size slide

  9. @nano72mkn
    たったの 4 画面
    1. ログイン
    2. 日記一覧
    3. 日記追加
    9

    View full-size slide

  10. @nano72mkn
    たったの 4 画面
    1. ログイン
    2. 日記一覧
    3. 日記追加
    4. プロフィール画面
    10

    View full-size slide

  11. @nano72mkn 11
    めっちゃ
    ミニマムスタート

    View full-size slide

  12. @nano72mkn 12
    開発期間
    たったの1週間
    リリースには追加で2日ほどかかっています。

    View full-size slide

  13. @nano72mkn
    開発1週間の内訳
    12/25 Flutterをinstallだけして寝る
    12/26 FlutterFireでFirebase導入
    12/27 ログイン画面追加
    12/28 日記一覧/保存機能追加
    12/29 実機で動作テスト
    12/30 アイコンを追加するなど申請準備
    12/31 Appleに申請を出す
    13

    View full-size slide

  14. @nano72mkn
    ありがとう、FlutterFire
    14

    View full-size slide

  15. @nano72mkn
    FlutterFireとは?
    Firebaseが公式で出している
    Flutter と Firebase の連携をしてくれる便利
    ツール
    15
    安直なロゴ

    View full-size slide

  16. @nano72mkn 16
    FlutterFireの導入
    が簡単すぎた

    View full-size slide

  17. @nano72mkn
    FlutterFireは導入が簡単!!
    firebase_coreを追加しましょう
    17

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. @nano72mkn
    FlutterFireはFirebase連携も簡単!!
    main.dartに
    - firebase_core
    - firebase_options.dart
    をimportし、
    initializeAppを追加
    22

    View full-size slide

  23. @nano72mkn
    FlutterFireはFirebase連携も簡単!!
    以上
    23

    View full-size slide

  24. @nano72mkn 24
    FlutterFire UI
    もすごかった

    View full-size slide

  25. @nano72mkn
    FlutterFire UIがすごかった
    25
    1. ログイン
    2. 日記一覧
    3. 日記追加
    4. プロフィール画面

    View full-size slide

  26. @nano72mkn
    FlutterFire UIがすごかった
    26
    1. ログイン
    2. 日記一覧
    3. 日記追加
    4. プロフィール画面

    View full-size slide

  27. @nano72mkn 27
    Flutter Fire UI
    で作ってます

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. @nano72mkn
    プロフィール画面
    ProfileScreen Widget を使用。
    ログイン画面と同じように
    providerConfigs を設定するだけ
    30

    View full-size slide

  31. @nano72mkn
    プロフィール画面
    ProfileScreen Widget を使用。
    ログイン画面と同じように
    providerConfigs を設定するだけ
    31

    View full-size slide

  32. @nano72mkn
    日記一覧画面
    FirestoreListView を使用。
    queryを指定し、
    itemBuilderは普通のListViewと同じ
    ように指定してあげるだけ
    32

    View full-size slide

  33. @nano72mkn
    日記一覧画面
    FirestoreListView を使用。
    queryを指定し、
    itemBuilderは普通のListViewと同じ
    ように指定してあげるだけ
    33

    View full-size slide

  34. @nano72mkn
    さいごに
    34

    View full-size slide

  35. @nano72mkn
    さいごに
    - FlutterFireあればすぐ開発できるので
    初心者の人も使ってみてね
    - One Line Diary は
    iOS / Android でリリースされています!
    (ぜひ!)
    35
    こんな感じで
    デザイン調整した

    View full-size slide

  36. @nano72mkn 36
    FlutterFireしか勝たん

    View full-size slide