Quick Search Bar Flutter Firebase MobX - Flutter Chat App Firebase #9
You will learn how to use a mobx computed property to track changes from two observable variables on the flutter chat app with firebase. One is users that keep in sync with firebase firestore data and another is an input text from the search bar. We will dynamically compute the people list based on these two observable properties.
Flutter is a modern UI toolkit for creating beautiful UI that uses the Skia engine to draw elements to the screen.
🚀 Supercharge Your Programming Journey with Springboard! 🚀
Get a $750 discount on Springboard courses through our referral link! Explore top-notch tech and programming courses, 1:1 mentorship, real-world projects, and job guarantees. Whether you're a beginner or pro, Springboard has you covered.
👉 Claim Your $750 Discount: https://www.springboard.com/invite/QB8MS
Start coding and building your tech career today! [Disclaimer: We may receive a referral bonus.]
TABLE OF CONTENTS
00:00 Intro
00:45 Add the SearchBar on People's Screen
📃invoke an action on the user state to set the search term and filter the people list
02:34 Create People observable variable
📃 create people computed mobx variable to track the changes on users and search text from the search bar
07:29 Demo
07:49 Next Episode
TABLE OF CONTENTS
00:00 Intro
00:17 Flutter Firebase Repo Template
The repo is here: https://github.com/fpatelm/flutter-fi...
00:28 Presentation of the code template
📃 This template contains the integration of Firebase Firestore, Firebase Authentication, and Firebase Storage dependencies and also the configuration to enable the app to target Firebase Cloud or Firebase Emulators. We will have two screens in this app, the standard out-of-the-box login screen, and the started counter home page.
01:33 Firebase setup for Android
📃On the firebase console, we create a new firebase project and activate the authentication phone number sign-in-method. Download google-service.json and insert it in the android directory on the Flutter project
03:02 Init firebase services
📃With the help of firebase CLI, we initialize the firebase services, more specifically the authentication phone number sign-in-method for the flutter app.
04:20 FlutterFire Auth UI
📃Integratethe FlutterFire Auth UI on the flutter App by adding a flutter widget gateway and query the FirebaseAuth to understand if the user is authenticated already or not.
07:46 Add configurations to the Android Manifest file
09:50 Demo of User authentication
11:12 Add the sign-out button
12:39 Final demo
12:54 Take away
14:35 Conclusion
🔻🔻 You might like the following videos: 🔻🔻
✅Easy Flutter Firebase Timestamp into DateTime • Easy Flutter Firebase Timestamp into ...
✅ Flutter Firebase CRUD Cloud Firestore • Flutter Firebase CRUD (Create, Read, ...
✅ FlutterFire UI Firebase Auth Phone Number • Easy Flutter Firebase Phone Number Auth
✅ Calculator App in Flutter • Flutter Calculator App - Flutter Stat...
✅ MacOS Calculator App in Flutter • Flutter Tutorial Crash Course - MacOS...
🔻🔻Flutter Cupertino Chat App Series 🔻🔻
✅ 1: Flutter Bottom Navigation Bar • Easy Flutter Tab Bar - Flutter Chat A...
✅ 2: Easy Flutter Firebase Firestore • Easy Flutter Firebase Firestore - Flu...
✅ 3: Flutter Mobile Phone Verification UI • Easy Flutter Firebase Phone Number Au...
✅ 4: Easy Flutter Firebase Phone Number Authentication • Easy Flutter Firebase Phone Number Au...
✅ 5: User Record Cloud Firebase Firestore • User Record Flutter Firebase Firestor...
✅ 6: Easy Chat Messages Using Firebase Firestore • Easy Chat Messages Flutter Firebase F...
✅ 7: Easy Chat Messages Screen Firebase Firestore with MobX • Chats List Flutter Firebase Firestore...
✅ 8: Upload Profile Picture with Firebase Storage with MobX • Upload Picture Flutter Firebase Stora...
✅ 9: Search People with Firebase and MobX • Quick Search Bar Flutter Firebase Mob...
✅ 10: Flutter Firebase AuthGate Flutter Auth • Flutter Firebase AuthGate Firebase Au...
✅ 11: Flutter Firebase Infinite List • Flutter Firebase Infinite List - Flut...
#firebasestorage #cloudfirestore #learnflutter #dart #fluttercalculator #flutterdev #dartdev #fluterando #flutterdeveloper #flutterfirebase #firebaseauth