Creating a messenger app with Flutter
DEV MOO
Build a messenger app using Flutter's Riverpod state management and Firebase.
Basic
Flutter, Firebase, riverpod
Creating a SNS app with Flutter
We will create an SNS app using Flutter's Provider/StateNotifier state management and Firebase.
Reviews from Early Learners
What you will learn!
State management using Provider/StateNotifier
Sign up / Email authentication / Login / Logout using Firebase Auth
Translation/Batch in Firestore
Upload/View/Delete Images Using Firestorage
Flutter Animation
Pagination
Debounce
Change the app launch icon
Instead of similar to-do apps, use a cool SNS!
Learning Flutter State Management by Building
In★gram made with my own hands
Flutter, the trend in mobile app development!
We've created this course to help you learn a variety of practical features. Learn the essential Flutter features needed to create an Instagram-like social media app!
Flutter Basics + Provider State Management
While creating a similar Instagram SNS app, you will learn about Provider (StateNotifier) state management and briefly learn about Flutter Animation .
This app is recommended for those who want to create a social media app, those who are curious about structure and state management, and those who want to implement complex functions beyond a to-do app.
A comprehensive overview of Firebase's key services
Learn about Firebase's main services , including Firebase integration, membership registration and email authentication login using Firebase Authentication, Firestore data retrieval/saving/editing/deleting/pagination and Transation/Batch, and how to save/delete image files in Cloud Store.
What you learn
Check it out.
- ✅ You can learn skills and knowledge that can be applied in practice .
- ✅ The lecture progresses by implementing various functions based on the basic pattern and framework, so it becomes easier to understand as the lecture progresses.
1. Project environment settings
- Create and connect a Flutter project and a Firebase project.
- Register the Firebase service and set the rules.
2. Membership registration screen
- Select a profile picture from your smartphone gallery and display it on the screen.
- Apply validation logic to each required field.
- Store data in Firebase Authentication, Firestore, and Cloud Storage.
- Send an email with a verification link to the email address you entered and print the message.
3. Login screen
- Apply validation logic to each required input field.
- Changes the login authentication status only for users who have completed email authentication.
4. Screen movement according to AuthStatus status
- Change the status value of AuthStatus depending on the Firebase Authentication authentication status.
- If the AuthStatus status is unauthenticated, you will be taken to the login screen.
5. Main screen
- Apply animation effects when moving between pages using the TabBarVIew widget.
- Use the BottomNavigatorBar widget to navigate pages using bottom buttons.
6. Post registration screen
- Select multiple photos from the gallery and view them in a slideshow.
- After entering the post content and deleting unnecessary photos, a registration completion message will be displayed as soon as the screen moves.
7. Post list screen
- Displays a list of registered posts on the screen.
- View multiple post photos in a slideshow and zoom in/out.
- Swipe down from the top to refresh the list of posts.
8. Profile screen
- Tap on the currently logged in user or their profile picture to display information about that specific user on the screen.
- Displays the number of posts made by the user, following, followers, and a list of posts on the screen.
- Executes the Follow and Unfollow functions.
9. Post screen
- Add a like feature to your posts and display the number of likes.
- Animate the like feature.
10. Likes list screen
- Displays a list of posts liked by the currently logged-in user.
11. Comment screen
- Create a screen to register and print comments on a post.
12. Post deletion function
- Deletes user-created posts.
- Data related to deleted posts, such as image files, post content, and comments, are deleted from the Firebase service.
13. User search screen
- Search for users by name.
- Go to the profile screen from the search results to display information about a specific user.
- Apply Debounce to your user search logic.
14. Paging function
- Apply the paging function to the post list screen, like list screen, and profile screen to retrieve a specified number of post data.
15. Change the app launch icon
- Change the app launch icon and splash screen.
The person who created this course, DEV MOO
- (Current) Freelance Web/Flutter App Development
- (Former) Soft Engineer Society SMART CLOUD IT MASTER course instructor
- Participated in the development of TOSHIBA ETC control modules (Japan)
- Participated in the development of SMBC's customer management platform (Japan)
- (Former) Participated in the development of the gourmet food delivery app
- Running a YouTube channel
Q&A 💬
Q. Please tell me the Flutter version used in the lecture.
I used Flutter 3.13.7.
Q. Why did you use Provider for state management?
Flutter offers several state management packages, including Riverpod, Bloc, and GetX. Among them, Provider is actively supported and recommended by Google, making it easy to find the information you need through online communities. Furthermore, I believe migrating from Provider to other state management packages, such as Riverpod, should be relatively straightforward.
Q. Isn't the lecture content not compatible with iOS?
The current lecture content has only been verified for Android. iOS support is scheduled for update.
Q. Do I need any prior knowledge to take the course?
Prior knowledge of Flutter basics and Provider state management is required. If you've created a simple todo app or notepad, you should be able to follow along.
Q. Do you provide source code?
We provide students with the source code through Github.
📢 Information to note before taking the course
- The lab environment requires Windows 10 and Android Studio .
- You must have a Flutter development environment set up. (This lecture uses version 3.13.7 .)
- Students will be provided with the final source code and practice materials (image files, etc.).
- Please review the prerequisite knowledge required for this course. Basic knowledge of Flutter and Provider state management is required. Experience creating a to-do app or simple notepad using Flutter is sufficient for this course.
- The lecture content is optimized for Android . (iOS support will be updated in the future.)
- Starting November 1, 2024, Firebase services will be billed on the Blaze plan, which charges based on usage. A credit card is required to use the Blaze plan. However, as long as you don't exceed the free usage allowance, you won't be charged. We believe the course content will be sufficient within the free allowance. For more information, please refer to the Firebase pricing policy.
Recommended for
these people
Who is this course right for?
Anyone who wants to create a SNS app
For those who want to take the Todo app to the next level
Anyone who wants to learn provider state management
Anyone who wants to experience various Firebase services
Need to know before starting?
Skills to create a simple app with Flutter
Provider / StateNotifier Basic Knowledge
201
Learners
15
Reviews
101
Answers
5.0
Rating
2
Courses
안녕하세요
한국, 일본에서 웹 개발 및 안드로이드 앱 개발자로 활동했습니다.
프로그래밍 강사로도 활동하면서 지식을 전파하여 사람을 가르친다는 일에
책임감을 갖고 학생분들이 성장하는 모습에 보람을 느끼고 있습니다.
excusme@naver.com
Curriculum
All
73 lectures ∙ (13hr 28min)
Course Materials:
Lecture resources
Published:
Last updated:
Reviews
All
9 reviews
5.0
9 reviews
koyk04082865Reviews 1
∙
Average Rating 5.0
5
100% enrolledI 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!
- devmooInstructor
Thank you! If you have any questions, please leave them anytime.
- efforthye
Reviews 8
∙
Average Rating 4.9
- hdrecssh8454
Reviews 1
∙
Average Rating 5.0
- twomonths
Reviews 2
∙
Average Rating 5.0
- nirman2602
Reviews 4
∙
Average Rating 5.0
Limited time deal
$39.60
23%
$51.70
DEV MOO's other courses
Check out other courses by the instructor!
Similar courses
Explore other courses in the same field!
![[Python beginner] ChatGPT voice translation app made with FlutterCourse Thumbnail](https://cdn.inflearn.com/public/courses/333668/cover/94589a80-ab05-4bd1-ad98-1e42b75a47fc/333668.png?f=avif&w=420)
![[Unity] Developing Idle Games TogetherCourse Thumbnail](https://cdn.inflearn.com/public/courses/334447/cover/a4464cfb-be08-4a40-b6e2-00060b912c1a/334447.png?f=avif&w=420)
