Creating a messenger app with Flutter
devmoo
Build a messenger app using Flutter's Riverpod state management and Firebase.
초급
Flutter, Firebase, riverpod
FlutterでSNSアプリを作成する
FlutterのProvider / StateNotifierステータス管理とFirebaseを活用してSNSアプリを作成します。
学習した受講者のレビュー
こんなことが学べます
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 基礎知識
196
受講生
15
受講レビュー
101
回答
5.0
講座評価
2
講座
안녕하세요
한국, 일본에서 웹 개발 및 안드로이드 앱 개발자로 활동했습니다.
프로그래밍 강사로도 활동하면서 지식을 전파하여 사람을 가르친다는 일에
책임감을 갖고 학생분들이 성장하는 모습에 보람을 느끼고 있습니다.
excusme@naver.com
カリキュラム
全体
73件 ∙ (13時間 28分)
講座資料（こうぎしりょう）:
授業資料
講座掲載日:
最終更新日:
受講レビュー
全体
9件
5.0
9件の受講レビュー
koyk04082865受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成I bought this while looking for a course that covers both Flutter and Firebase. It was a bit difficult at first because I was new to providers, so I studied the basics of providers and finished it quickly. I'm going to listen to it n times... But I think I need to study providers more to fully understand it..ㅜㅜ First of all, I like that the sound quality is clear and consistent. The text is also neat and readable. And I liked that the instructor explained the reason why the code was done this way while writing it. I also liked the way the code was improved. Since it was an Insta clone course that could implement basic CRUD operations, I think I could use it to create any app. Overall, it was a neat, thorough, and clear course!
- devmoo知識共有者
Thank you! If you have any questions, please leave them anytime.
- efforthye
受講レビュー 8
∙
平均評価 4.9
- hdrecssh8454
受講レビュー 1
∙
平均評価 5.0
- twomonths
受講レビュー 2
∙
平均評価 5.0
- nirman2602
受講レビュー 4
∙
平均評価 5.0
￥7,874
devmooの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![[Python beginner] ChatGPT voice translation app made with Flutter강의 썸네일](https://cdn.inflearn.com/public/courses/333668/cover/94589a80-ab05-4bd1-ad98-1e42b75a47fc/333668.png?f=avif&w=420)
![[Unity] Developing Idle Games Together강의 썸네일](https://cdn.inflearn.com/public/courses/334447/cover/a4464cfb-be08-4a40-b6e2-00060b912c1a/334447.png?f=avif&w=420)