Use Flutter and Firebase to build a responsive Instagram Clone. After this tutorial, you will be able to use Firebase in any of your projects. You will learn about Firestore, Firebase Auth, Firebase Storage, Responsive UI, and much more!
💻 Code:
✏️ Course developed by Rivaan Ranawat. Check out his channel:
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:00:19) Demo
⌨️ (0:03:25) Prerequisites
⌨️ (0:04:31) Setup & Theming the App
⌨️ (0:09:31) Building Responsive Layout Widget
⌨️ (0:15:47) Setting Up Firebase
⌨️ (0:33:10) Login Screen UI (Mobile)
⌨️ (0:55:58) Signup Screen UI (Mobile)
⌨️ (1:02:41) Firebase Signup Auth
⌨️ (1:52:12) Firebase Login Auth
⌨️ (2:02:33) Persisting Auth State
⌨️ (2:19:49) Modelling User Data
⌨️ (2:25:47) User Data State Management
⌨️ (2:48:02) Mobile Bottom App Bar
⌨️ (2:57:49) Add Post Screen UI
⌨️ (3:10:08) Selecting Image
⌨️ (3:21:18) Storing Post Data in Firebase
⌨️ (3:44:16) Feed Posts UI
⌨️ (4:10:08) Displaying Post Data from Firebase
⌨️ (4:22:04) Like Animation
⌨️ (4:36:21) Updating Likes
⌨️ (4:45:11) Comments Screen UI
⌨️ (4:59:37) Storing Comments in Firestore
⌨️ (5:09:47) Displaying Comments
⌨️ (5:25:58) Deleting Post
⌨️ (5:28:56) Searching Users
⌨️ (5:39:45) Showing Posts on Search Screen
⌨️ (5:46:06) Creating Reusable Profile Screen UI
⌨️ (6:05:41) Displaying Profile Data
⌨️ (6:27:16) Following Users
⌨️ (6:35:30) Signing Out
⌨️ (6:37:27) Creating Responsive UI
⌨️ (6:51:15) Conclusion
Resources:
🔗 colors.dart File:
🔗 Instagram Logo:
🔗 Firestore Rules:
🔗 Firebase:
🔗 Pubspec Assist:
🔗 In case of error while configuring Firebase for iOS:
🔗 Renaming the android package:
Dependencies:
🔗
🔗
🔗
🔗
🔗
🔗
🔗
🔗
🔗
🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster
—
Learn to code for free and get a developer job:
Read hundreds of articles on programming:
And subscribe for new videos on technology every day:
It’s not a mistake ✨is the masterpiece ✨
This comment is not a masterpiece, is a mistake
@Dyn0 good job you are first hate comment in this YouTube
@EPM The Gamer shut
@EPM The Gamer W
@Amenus lol
Hats of to your hard work!!👏🏻👏🏻
Hey folks! Thanks for watching and I hope you enjoyed the course. Feel free to contact me with any questions and I’ll be more than happy to answer them. Be sure to check out my channel for more full stack development tutorials.
I learned so many things from this course. Thank you so much for sharing such skills and knowledge, very very appreciated.
@Aditya Chavda Thank You So Much Aditya!
Hey Rivaan, @ 6:08:32 I’m getting an error, when I replace ‘username’ with UserData[‘username], “type Null? is not a subtype of type String?”…followed exactly what you did tho..
after registering(android) the clone to fire base, even if i did all you mentioned i cannot run the project. or should i find macbook to register ios app first?
Firebase login is not working but registration is going pretty well. Sir do you have idea how to resolve that?
Starting this today. Can’t wait to see the finished product (and learn a lot in doing so)!!
Good luck mann
See you again after it😄
Did you finish it?
@Luis Puentes same Q
Does it include the messaging feature??
Great tutorial. One criticism though: could you make these tutorials more accessible to Windows users? At 19:55 you use XCode but provide no alternative for windows users. Also soon after when calling pod install.
@Cole Drain Yep. My bad.
@Rivaan Ranawat Hello Rivaan, I appreciate you taking the time to reply. I realized that too after a bit of research, and plan to program only for Android and Web at the moment. Thanks for the the clarification!
Alternatively, you can install virtual machine on your Windows and then build/test iOS with it.
Hello friend, I still do not understand how no one showed this solution, but it is very simple. Do all the process that the author did, but for the android platform ( Windows ). You can fix it 😉
I was struggling with same and found a solution:
1. Inside Runner.xcodeproj folder, open project.pbxproj
2. Then to search, press CTRL+F
3. Search for PRODUCT_BUNDLE_IDENTIFIER
4. You will get your ios bundle id.
but you can not test your app on windows.
Legendary developer 🔥
Here I struggle with native builds 🤦♂️
Just the moment I was learning flutter, and I needed something recent 🥺 Thanks FCC
Thank you very much..
You have made my life so easier with all your flutter videos. I can’t thank you enough. 🙂
Woohoo! Great, will od this course tomorrow when i have time, im sure i will learn a lot.
Thanks for sharing this!
I think this course is what was missing for more advanced developers. Great work Rivaan!!!
Thank you so much George!
👍👍👍 That was really an incredibly good tutorial 👍👍👍
😁 Thank you very much 😁
Amazing tutorial. I’m learning a lot and I’m loving it. Quick question, though: wouldn’t it be simpler and faster to use FlutterFire to setup Firebase?
i am wondring that too.
totally agree!
Yep, Flutterfire is faster and simpler! While making this course I wasn’t aware about Flutterfire 😅
I realy apreciated this experience dabbling in flutter apps development. Thanks a lot Rivaan Ranawat!
Finally Completed it. I spent my two weekends to complete this tutorial. This tutorial was pretty long but helping. I’ll try adding more and more features on it. Thanks Rivann Sir for this amazing tutorial. 🙏🙏🙏🙏🙏🙏
Thank you FreeCodeCamp. This course helped me understand each and everything related to firebase and firestore
Hello, thanks for the tutorial and the content. I am at half of it. I have an error with the web version, NetworkImage throws an exception whether the image is stored in firebase or somewhere else it is the same. It is CORS issue. I see in the video it is working normally. What did I miss?
Same as here.
Did you get the solution ?
Great Tutorial I have just finished it and it’s just perfect for everyone! I add some feature like the bookmark and the edit profile page Thanks a lot!!
Wow this is nuts i just watched this 6 hour long video and I can’t believe how much I learned! I actually feel like I can make an own app now
Why not validate user inputs on the textformfields using the inherent validator call back? I think that is a better way of validating user input. The auth class methods should only be invoked when a user’s entered values are valid.
Learned a lot! Thank you