Flutter로 메신저앱 만들기
DEV MOO
Flutter의 Riverpod 상태 관리와 Firebase를 활용해서 메신저 앱을 제작합니다.
초급
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
196
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
koyk0408Reviews 1
∙
Average Rating 5.0
5
100% enrolled플러터랑 파이어베이스 같이 하는 강의 찾다가 구매하게 되었어요. 프로바이더를 처음 접해서 처음에 좀 어려웠고, 프로바이더 기본만 좀 공부하고 마저 후다닥 들었습니다. n번 들으려고... 근데 프로바이더를 더 공부해야 완전히 이해가 될 것 같네요..ㅜㅜ 일단 음질이 명확하고 일정해서 좋아요. 글씨도 깔끔하게 잘 보입니다. 그리고 코드 작성하면서 왜 이렇게 하는지 이유를 말씀해주시는 게 좋았어요. 코드를 개선해나가는 방식도 좋았구요. 기본적인 CRUD 동작을 구현할 수 있어서 인스타 클론 강의지만 어떤 앱을 만들어도 활용할 수 있을 것 같아요. 전반적으로 깔끔하고 꼼꼼하며 명료한 강의였습니다!
- DEV MOOInstructor
감사합니다! 질문 있으시면 언제든지 남겨주세요.
- efforthye
Reviews 8
∙
Average Rating 4.9
- hd.recssh
Reviews 1
∙
Average Rating 5.0
- 투먼쓰
Reviews 2
∙
Average Rating 5.0
$51.70
devmoo's other courses
Check out other courses by the instructor!
Similar courses
Explore other courses in the same field!
![[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)
