Flutter로 메신저앱 만들기
DEV MOO
Flutter의 Riverpod 상태 관리와 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 基礎知識
211
受講生
16
受講レビュー
101
回答
5.0
講座評価
2
講座
안녕하세요
한국, 일본에서 웹 개발 및 안드로이드 앱 개발자로 활동했습니다.
프로그래밍 강사로도 활동하면서 지식을 전파하여 사람을 가르친다는 일에
책임감을 갖고 학생분들이 성장하는 모습에 보람을 느끼고 있습니다.
excusme@naver.com
カリキュラム
全体
73件 ∙ (13時間 28分)
講座資料（こうぎしりょう）:
授業資料
8. SVGファイル使用
06:39
12. メール有効性検証
07:55
14. 認証状態管理
10:28
15. 状態管理 登録後、会員登録テスト
13:38
19. 例外処理の適用
12:23
講座掲載日:
最終更新日:
受講レビュー
全体
10件
5.0
10件の受講レビュー
koyk0408受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成플러터랑 파이어베이스 같이 하는 강의 찾다가 구매하게 되었어요. 프로바이더를 처음 접해서 처음에 좀 어려웠고, 프로바이더 기본만 좀 공부하고 마저 후다닥 들었습니다. n번 들으려고... 근데 프로바이더를 더 공부해야 완전히 이해가 될 것 같네요..ㅜㅜ 일단 음질이 명확하고 일정해서 좋아요. 글씨도 깔끔하게 잘 보입니다. 그리고 코드 작성하면서 왜 이렇게 하는지 이유를 말씀해주시는 게 좋았어요. 코드를 개선해나가는 방식도 좋았구요. 기본적인 CRUD 동작을 구현할 수 있어서 인스타 클론 강의지만 어떤 앱을 만들어도 활용할 수 있을 것 같아요. 전반적으로 깔끔하고 꼼꼼하며 명료한 강의였습니다!
- DEV MOO知識共有者
감사합니다! 질문 있으시면 언제든지 남겨주세요.
- gimseongcheol33
受講レビュー 1
∙
平均評価 5.0
- efforthye
受講レビュー 8
∙
平均評価 4.9
- hd.recssh
受講レビュー 1
∙
平均評価 5.0
- 투먼쓰
受講レビュー 2
∙
平均評価 5.0
￥8,289
DEV MOOの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![[Python 초보] Flutter로 만드는 ChatGPT 음성번역앱강의 썸네일](https://cdn.inflearn.com/public/courses/333668/cover/94589a80-ab05-4bd1-ad98-1e42b75a47fc/333668.png?f=avif&w=420)
![[Unity] 함께 만들어가는 방치형 게임 개발강의 썸네일](https://cdn.inflearn.com/public/courses/334447/cover/a4464cfb-be08-4a40-b6e2-00060b912c1a/334447.png?f=avif&w=420)
