inflearn logo
inflearn logo

FlutterでSNSアプリを作成する

FlutterのProvider / StateNotifierステータス管理とFirebaseを活用してSNSアプリを作成します。

難易度 初級

受講期間 無制限

Flutter
Flutter
dart
dart
Firebase
Firebase
Android
Android
Flutter
Flutter
dart
dart
Firebase
Firebase
Android
Android
날개 달린 동전

講座 を紹介して、成長と収益を得ましょう!

날개 달린 동전

マーケティングパートナーズ

講座 を紹介して、成長と収益を得ましょう!

学習した受講者のレビュー

学習した受講者のレビュー

5.0

5.0

koyk0408

100% 受講後に作成

フラッターとファイアベースのような講義を探して購入することになりました。プロバイダに初めて触れて初めてちょっと難しかったし、プロバイダの基本だけを少し勉強してさえ聞いていました。 n回聞こうと思って...しかしプロバイダをもっと勉強しなければ完全に理解できそうですね..ㅜㅜ 一度音質が明確で一定して良いです。文字もきれいに見えます。 そして、コードを書いて、なぜこれをするのかを教えてくれたのは良かったです。コードを改善していく方法も良かったです。 基本的なCRUD動作を実装できるので、インスタクローン講義だけどどんなアプリを作っても活用できると思います。 全体的にすっきりと細かくて明瞭な講義でした!

5.0

gimseongcheol33

81% 受講後に作成

本当にとても役に立つ講義です。Flutterを使いたいなら必ず受講することをお勧めします。

5.0

hd.recssh

5% 受講後に作成

しっかり聞きます。この講義を受けて、私だけのアプリを作って起業できたらという願いを込めて勉強します。

受講後に得られること

  • Provider / StateNotifierを活用した状態管理

  • Firebase Authを利用した会員登録/メール認証/ログイン/ログアウト

  • FirestoreのTransation / Batch

  • Firestorageを利用した画像のアップロード/閲覧/削除

  • Flutter Animation

  • Pagination

  • Debounce

  • アプリ実行アイコンの変更

似たような闘頭アプリの代わりに素晴らしいSNSを!
作って学ぶフラッターの状態管理

私の手で作る人★グラム
モバイルアプリ開発系の大勢、Flutter!

実務で利用可能なさまざまな機能を学習できるように講義を作成しました。同様のInstagram SNSアプリを作成し、必要なフラッター関連の機能を学びましょう!

Flutter 基礎 + Provider 状態管理

同様のInstagram SNSアプリを作成しながら、Provider(StateNotifier)の状態管理を習得し、 Flutter Animationについて簡単に学習します。

SNSアプリを作成したい方、構造や状態管理について気になった方、To-Do App以上の複雑な機能を実装したい方におすすめです。

Firebaseの主要サービス総まとめ

Firebaseの連携、Firebase Authenticationを利用した会員登録とEメール認証のログイン、Firestoreデータの照会/保存/修正/削除/ページネーション、Transation/Batch、Cloud Storeに画像ファイルを保存/削除する方法など、Firebaseの主なサービスについて学習します。


学ぶ内容
確認してみてください。

  • 実務に活用できる技術、知識を学習できます。
  • 基本的なパターン、枠組みを構成した状態で各種機能を実装する方法で講義を進めるため、後半に行くほど講義を理解しやすくなります。

1. プロジェクト環境設定

  • FlutterプロジェクトとFirebaseプロジェクトを作成して連携します。
  • Firebaseサービスを登録してルールを設定します。

2. 会員登録画面

  • スマートフォンギャラリーでプロフィール写真を選択して画面に表示します。
  • 各必須入力項目に検証ロジックを適用します。
  • Firebase Authentication、Firestore、Cloud Storageにデータを保存します。
  • 入力したEメールに認証リンクが作成されたEメールを送信し、メッセージを出力します。

3. ログイン画面

  • 各必須入力項目に検証ロジックを適用します。
  • 電子メール認証が完了したユーザーに対してのみログイン認証ステータスを変更します。

4. AuthStatusの状態に応じた画面の移動

  • Firebase Authentication 認証状態に応じて AuthStatus の状態値を変更します。
  • AuthStatusステータス値が未認証の場合は、ログイン画面に進みます。

5. メイン画面

  • TabBarVIewウィジェットを使用してページを移動するときにアニメーション効果を適用します。
  • BottomNavigatorBarウィジェットを使用して、下部ボタンにページを移動します。

6. 投稿登録画面

  • ギャラリーで複数の写真を選択し、選択した写真をスライドとして確認します。
  • 投稿内容を入力し、不要な写真は削除後、登録すると画面移動と同時に登録完了メッセージを出力します。

7. 投稿リスト画面

  • 登録した投稿のリストを画面に表示します。
  • 複数の投稿写真をスライドで確認してズームします。
  • 一番上で画面を下に下げて、投稿リストを更新します。

8. プロフィール画面

  • 現在アクセスしているユーザーまたはプロフィール写真をタッチして、特定のユーザーの情報を画面に表示します。
  • ユーザーが作成した投稿の数、 following、follower、投稿のリストを画面に表示します。
  • Folllow、Unfollow 機能を実行します。

9. 投稿画面

  • 投稿に「いいね!」機能を追加し、「いいね!」の数を表示します。
  • 「いいね!」機能にアニメーションを適用します。

10.いいねリスト画面

  • アクセスしているユーザーが「いいね」をクリックした投稿のリストを画面に表示します。

11. コメント画面

  • 投稿にコメントを登録して出力する画面を作成します。

12. 投稿削除機能

  • ユーザーが作成した投稿を削除します。
  • 削除した投稿に関連する画像ファイル、投稿内容、コメントなどのデータをfirebaseサービスから削除します。

13. ユーザー検索画面

  • 名前でユーザーを検索します。
  • 検索結果からプロフィール画面に移動し、特定のユーザーの情報を表示します。
  • ユーザー検索ロジックにDebounceを適用します。

14. ページング機能

  • 投稿リスト画面、お気に入りリスト画面、プロフィール画面にページング機能を適用して、指定した数だけ投稿データを取得します。

15. アプリ実行アイコンの変更

  • アプリ実行アイコンとSplash Screenを変更します。

この講義を作った人、DEV MOO

  • (現)Web/Flutterアプリ開発フリーランサー
  • (前)ソフトエンジニアソーシアティSMART CLOUD IT MASTERコース講師
  • (前)東芝ETC制御モジュール開発参加(日本)
  • (前)SMBCカスタマーケアプラットフォーム開発参加(日本)
  • (前)グルメ時代配信アプリ開発参加
  • YouTubeチャンネル運営中

Q&A 💬

Q.レッスンに使用されているFlutterのバージョンを教えてください。

Flutter 3.13.7を使用しました。

Q. 状態管理にProviderを使用した理由は何ですか?

Flutterには、Riverpod、Bloc、GetXなど、さまざまなステータス管理パッケージがあります。その中でも、ProviderはGoogleが積極的にサポートし推奨するステータス管理パッケージで、インターネットコミュニティなどを通じて必要な情報を簡単に検索できます。また、ProviderからRivderpodなど他の状態管理パッケージへの以前の作業も比較的難しくないと思います。

Q. 講義内容がiOSには対応していませんか?

現在の講義内容はAndroidでのみ検証されています。 iOS対応はアップデート予定です。

Q. 講義を聞くための事前知識が必要ですか?

Flutterの基本とProviderの状態管理に関する事前の知識が必要です。簡単なTodoアプリやメモ帳の度合いを作ってみたら、講義に十分従うことができるでしょう。

Q. ソースコードを提供していますか?

受講生にはGithubを通じてソースコードを提供します。

📢受講前の注意事項

  • 練習環境にはWindows 10、Android Studioが必要です。
  • Flutter開発環境が構築されている必要があります。 (講義では3.13.7バージョンを使用します。)
  • 受講生には最終的なソースコードと実習資料(画像ファイルなど)を提供します。
  • 学習に必要な選手の知識を確認してください。 Flutterの基礎知識とProviderステータス管理の基礎知識が必要です。Flutterを使用してTo-doアプリまたは簡単なメモ帳を作成した経験がある場合は、十分に受講できます。
  • 講義の内容はAndroidに合わせてあります。 (iOS対応は今後のアップデート予定です。)
  • 2024年11月1日より、Firebaseの各種サービスを使用するためには、サービス使用量に応じて料金が設定されるBlazeプランを利用するように変更されました。 Blazeプランを利用するにはクレジットカードの登録が必要です。ただし、無料使用量を超えない限り、料金は請求されず、講義内容は無料使用量内で十分に作業が可能であると思います。詳細については、Firebaseの料金ポリシーを参照してください。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • SNSアプリを作成したい方

  • Todoアプリ 次のステップに進みたい方

  • Provider 状態管理を学習したい方

  • 各種Firebaseサービスを体験したい方

前提知識、
必要でしょうか?

  • Flutterで簡単なアプリを作るほどのスキル

  • Provider/StateNotifier 基礎知識

こんにちは
DEV MOOです。

218

受講生

17

受講レビュー

101

回答

5.0

講座評価

2

講座

こんにちは

韓国、日本でウェブ開発およびAndroidアプリ開発者として活動してきました。
プログラミング講師としても活動しながら知識を広め、人を教えるということに
責任感を持ち、学生の皆さんが成長する姿にやりがいを感じています。

excusme@naver.com

もっと見る

カリキュラム

全体

73件 ∙ (13時間 28分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

10件

5.0

10件の受講レビュー

  • hdrecssh8454님의 프로필 이미지
    hdrecssh8454

    受講レビュー 1

    平均評価 5.0

    5

    5% 受講後に作成

    しっかり聞きます。この講義を受けて、私だけのアプリを作って起業できたらという願いを込めて勉強します。

    • gimsc님의 프로필 이미지
      gimsc

      受講レビュー 1

      平均評価 5.0

      5

      81% 受講後に作成

      本当にとても役に立つ講義です。Flutterを使いたいなら必ず受講することをお勧めします。

      • koyk04082865님의 프로필 이미지
        koyk04082865

        受講レビュー 1

        平均評価 5.0

        5

        100% 受講後に作成

        フラッターとファイアベースのような講義を探して購入することになりました。プロバイダに初めて触れて初めてちょっと難しかったし、プロバイダの基本だけを少し勉強してさえ聞いていました。 n回聞こうと思って...しかしプロバイダをもっと勉強しなければ完全に理解できそうですね..ㅜㅜ 一度音質が明確で一定して良いです。文字もきれいに見えます。 そして、コードを書いて、なぜこれをするのかを教えてくれたのは良かったです。コードを改善していく方法も良かったです。 基本的なCRUD動作を実装できるので、インスタクローン講義だけどどんなアプリを作っても活用できると思います。 全体的にすっきりと細かくて明瞭な講義でした!

        • devmoo
          知識共有者

          ありがとうございます! 質問があれば、いつでも残してください。

      • twomonths님의 프로필 이미지
        twomonths

        受講レビュー 2

        平均評価 5.0

        5

        100% 受講後に作成

        とても有益です。良い講義をありがとうございます!

        • efforthye님의 프로필 이미지
          efforthye

          受講レビュー 8

          平均評価 4.9

          5

          8% 受講後に作成

          似ている講座

          同じ分野の他の講座を見てみましょう!

          ¥8,177