Flutter & Firebase Course - Build a Full Stack Instagram Clone

JavaScript / Web 611K צפיות 12/01/2022
פתח ב-YouTube

דרג סרטון זה

התחבר כדי לדרג

תיאור

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: https://github.com/RivaanRanawat/instagram-flutter-clone ✏️ Course developed by Rivaan Ranawat. Check out his channel: https://www.youtube.com/channel/UC-1kzHtwBY8n0TY5NhYxNaw ❤️ Try interactive Full Stack courses we love, right in your browser: https://scrimba.com/freeCodeCamp-Fullstack (Made possible by a grant from our friends at Scrimba) ⭐️ 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: https://github.com/RivaanRanawat/instagram-flutter-clone/blob/master/lib/utils/colors.dart 🔗 Instagram Logo: https://github.com/RivaanRanawat/instagram-flutter-clone/blob/master/assets/ic_instagram.svg 🔗 Firestore Rules: https://firebase.google.com/docs/firestore/security/get-started 🔗 Firebase: https://firebase.google.com 🔗 Pubspec Assist: https://marketplace.visualstudio.com/items?itemName=jeroen-meijer.pubspec-assist 🔗 In case of error while configuring Firebase for iOS: https://stackoverflow.com/questions/64037496/none-of-your-spec-sources-contain-a-spec-satisfying-the-dependencies-firebase 🔗 Renaming the android package: https://stackoverflow.com/questions/51534616/how-to-change-package-name-in-flutter Dependencies: 🔗 https://pub.dev/packages/firebase_core 🔗 https://pub.dev/packages/cloud_firestore 🔗 https://pub.dev/packages/firebase_auth 🔗 https://pub.dev/packages/firebase_storage 🔗 https://pub.dev/packages/flutter_svg 🔗 https://pub.dev/packages/intl 🔗 https://pub.dev/packages/file_picker 🔗 https://pub.dev/packages/flutter_staggered_grid_view 🔗 https://pub.dev/packages/provider 🎉 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: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

#freeCodeCamp.org