Creating a SNS app with Flutter
We will create an SNS app using Flutter's Provider/StateNotifier state management and Firebase.
This course is prepared for Basic 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 Making
In★gram made with my own hands
The trend in mobile app development, Flutter!
We've created a course so you can learn a variety of features that can be used in practice. Learn the essential Flutter-related features while creating a similar Instagram SNS 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 .
I recommend this to anyone who wants to create a SNS app, anyone who is curious about structure and state management, or anyone who wants to implement complex functions beyond a To-Do App.
Summary of Firebase's main services
Learn about Firebase's main services, such as Firebase integration, member sign-up and email authentication login using Firebase Authentication, Firestore data retrieval/save/edit/delete/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 the lecture as it progresses.
1. Project environment settings
- Create and connect a Flutter project and a Firebase project.
- Register Firebase service and set 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 input field.
- Store data in Firebase Authentication, Firestore, and Cloud Storage.
- Sends an email with a verification link to the email address you entered and prints the message.
3. Login screen
- Apply validation logic to each required input field.
- Change login authentication status only for users who have completed email authentication.
4. Screen movement according to AuthStatus status
- Changes the status value of AuthStatus depending on the Firebase Authentication authentication status.
- If the AuthStatus status value 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 the selected photos 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 list of posts on the screen.
- Executes the Follow and Unfollow functions.
9. Post screen
- Add 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 connected 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) Web/Flutter App Development Freelancer
- (Former) Soft Engineer Society SMART CLOUD IT MASTER Course Instructor
- (Former) Participated in the development of TOSHIBA ETC control module (Japan)
- Participated in the development of SMBC 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 version of Flutter used in the lecture.
I used Flutter 3.13.7.
Q. Why did you use Provider for state management?
Flutter has several state management packages, such as Riverpod, Bloc, and GetX. Among them, Provider is a state management package actively supported and recommended by Google, and you can easily search for the information you want through Internet communities, etc. Also, I think that the migration from Provider to other state management packages, such as Rivderpod, will not be relatively difficult.
Q. Isn't the lecture content not compatible with iOS?
The current lecture content has been verified only for Android. iOS support is scheduled to be updated.
Q. Do I need any prior knowledge to take the course?
You will need some prior knowledge of Flutter basics and Provider state management. If you have experience creating a simple Todo app or notepad, you will be able to follow the course.
Q. Do you provide source code?
We provide source code to students through Github.
📢 Information to note before taking the class
- The lab environment requires Windows 10 and Android Studio .
- You must have a Flutter development environment set up. (The lecture uses version 3.13.7 .)
- We provide students with the final source code and practice materials (image files, etc.).
- Please check the prerequisite knowledge required for learning. Basic knowledge of Flutter and basic knowledge of Provider state management are required. If you have experience creating a to-do app or a simple notepad using Flutter, you can sufficiently take the course.
- The lecture content is tailored to Android . (iOS support will be updated later.)
- Starting November 1, 2024, the Blaze plan will be used to charge for various Firebase services based on service usage. Credit card registration is required to use the Blaze plan. However, as long as you do not exceed the free usage, you will not be charged, and I believe that you will be able to sufficiently work on the course content within the free usage. For more information, please refer to Firebase's 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
Hello
This is devmoo
Students
155
Reviews
10
Rating
5.0
Courses
2
안녕하세요
한국, 일본에서 웹 개발 및 안드로이드 앱 개발자로 활동했습니다.
프로그래밍 강사로도 활동하면서 지식을 전파하여 사람을 가르친다는 일에
책임감을 갖고 학생분들이 성장하는 모습에 보람을 느끼고 있습니다.
excusme@naver.com
Curriculum
All
73 lectures ∙ (13hr 28min)
are provided.