Flutter & Firebase App Tutorial #24 - User Data Model
Key Takeaways
]]> User Data Model in Flutter and Firebase App
Full Transcript
or rather than gang so this is looking pretty good we're making progress now but there's one issue I want to address with this form right here well it's not really an issue more of a usability thing so you know when you use a first signs up we give them these default values for their firestore document nuke remember for the name zero sugars for the sugars and this value of 100 which is a light brown now what I'd like to do is when they go to the Settings panel I like it to pre-populate with those values and then in the future once those values have been updated if they open the settings panel again to pre-populate with those values that they've changed it to now at the minute it's always going to default to nothing in this one right here and then in this one over here it's always going to default to zero and then over here it's going to default to 100 to begin with it should be new crew member right here so they could change it and these two would be the same but in the future once they've already changed it and they come back to this form then it would be whatever their current user data is so for that we're gonna have to set up some kind of stream again and this time listen to their use a document so if I log in or sign up I have a user ID associated with me now I want to set up a stream to my firestore document with that ID the same as my user ID so we're listening to that document and we're getting the data initially and we're pre-populating this form with that initial data right now when it changes in the future obviously it's going to update over here as well so if we go to the form again it's going to be pre-populated with that changed data because if it's a stream every time it changes the data is traveling down the stream to our app and we're updating it so what we're gonna do is we're gonna create a new stream now and we're gonna do this inside the database service class and that stream is gonna be linked up to my firestore document whoever's logged in we're gonna take our UID when we're logged in and set up a stream with that document so whoever's logged in it's always a different stream their document in the firestore database so we're gonna set that up but we're also going to create a user data model much like we've created a user model and we've created also a brew model this time we're creating a user data model alright and what we're gonna do is every time we get some kind of document snapshot back down that stream or for the users document we're gonna take that data and put it into some kind of user data object so that's what we're gonna do so first of all let's go to the database file over here this is where we're going to set up the stream first of all and let's scroll down here and say get user doc stream that's what it is right they use a document so this is going to be a stream and it's going to return a document snapshot okay now ultimately we don't want to return this ultimately we want to return an actual user data model or user data object based on a user data model but for now let's just do it as we get it from firestore because that's what this is going to return in the stream so we say get oops not in capitals get and then we're going to call this user data and inside here we're going to return the brew collection remember that is the collection reference that we created right at the start up here so it references the brew collection and then we want to go into a specific document don't we so we say documents and what document do we want well we're going to passing the UID to the document that we want and that UID is coming from this thing over here so when we create an instance of this class to use this stream later on we're going to pass in that UID and so we know which document to get and that your ID is going to be the ID of the user that's logged in so then now we have that we can say dot snapshots much like we did for this thing the actual collection we can do the same thing for the document so every time it changes now we're going to receive a document snapshot back and we also receive one when the app first loads as well so that's what we're doing at the minute later on we're going to map this into something else but now we've set up this stream so like I said if we're going to map this to something else but we need a user data model to do that with so let me go over here and in the user file we'll just do it here I'm going to create a new class and call this user data like so now what I'm gonna do is just copy and paste these different properties instead of you watching me type all these out right here and it's very simple all we're doing is passing here a UID named Sugar's and strength this represents the user data right each document has an ID each document has a name Sugar's under strength and we're also passing those values in right here so when we create a new use of data object we pass those values in so that now if we go back to our database file and by the way you might think that this looks quite like the brew class the brew model right it is it's very similar it has a lot of the same properties the brew model log doesn't have this thing right here so potentially you could use the brew model instead if you didn't want to create this user data class but I think I prefer to do it this way because it means in the future I could extend one model independent of the other right so now let's go back to the database file over here and up here we need a method to take a document snapshot and turn it into a user data object based on that user data model so let us first of all create a comment that says user data from snapshot so this is going to return a user data object and we need to give this a name so user data from snapshot makes sense right and this is going to take in a document snapshot which is what is returned to us down this stream right here remember document snapshot so we're going to take that in and we'll call it snapshots and inside this function we are going to return a new user data object so we'll say return user data you should be quite used to this because I think this is the third time we've done this now and we need to pass in the different properties into this so we need a UID which is going to be the UID which we should have here when we create an instance of this when they log in and also we need the other three properties so first of all we have the name and that is going to be equal to the snapshot the document snapshot dot data remember that's how we get the data from a document snapshot and then the data property we want is the name right so we can copy this and just paste it down here a couple of times and then we can change the values so the second one is going to be the sugars so we'll change it there and we'll change it here as well sugars and then the third one is going to be the strength so we'll change it in both places like so okay so this is what we're doing we're now creating this function that is taken in the snapshot which is what we returned here down the stream and we're returning based on that snapshot and you use a data object now we can't use this yet because we've not imported it so let's do that at the top let's import and it's in the models folder and it's the user file that we need okay so now we need to use this down here in this stream first of all now we want to map this into a stream that's going to return a user data object so let's replace this with user data and spell it correctly and then after snapshots let's now go to map this into a different stream and this is going to be the user data from snapshot so this now should all work we've set up our stream which is returning this thing right here it's taking the current firebase stream from our fire store document based on this UID which we're going to pass in later you'll see that later and every time there's a change or initially we're receiving a snapshot to tell us about that document at that moment in time right what's the data on it but we don't want to work with document snapshots we want to work with a custom object based on our user data model right here so it has just these four properties that we need so what we do is we map it into a different stream based on this function which takes that document snapshot and it returns a user data object based on that document snapshot so it makes it easier to work with so we have this string setup now but what we need to do now is somehow listen to this stream inside this form right here so that we can take those values when we get them and output them to these different fall fields and that's what we're going to do in the next video by taking a look at this dream builder
Original Description
Hey gang, in this Flutter tutorial we'll set up a stream to listen to our Firebase/Firestore user data & create a UserData model to reflect any data we get back.
----------------------------------------
🐱💻 🐱💻 Course Links:
Course files - https://github.com/iamshaunjp/flutter-firebase
🐱💻 🐱💻 Other Related Courses:
+ Flutter Tutorial for Beginners - https://www.youtube.com/playlist?list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ
+ Firebase Auth Tutorial - https://www.youtube.com/playlist?list=PL4cUxeGkcC9jUPIes_B8vRjn1_GaplOPQ
+ Firebase Firestore Tutorial - https://www.youtube.com/playlist?list=PL4cUxeGkcC9itfjle0ji1xOZ2cjRGY_WB
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Net Ninja · Net Ninja · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Net Ninja
Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Net Ninja
Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Net Ninja
GraphQL Tutorial #1 - Introduction to GraphQL
Net Ninja
GraphQL Tutorial #2 - A Birdseye View of GraphQL
Net Ninja
GraphQL Tutorial #3 - Project (stack) Overview
Net Ninja
GraphQL Tutorial #4 - Making Queries (front-end preview)
Net Ninja
GraphQL Tutorial #5 - Express App Setup
Net Ninja
GraphQL Tutorial #6 - Setting up GraphQL
Net Ninja
GraphQL Tutorial #7 - GraphQL Schema
Net Ninja
GraphQL Tutorial #8 - Root Query
Net Ninja
GraphQL Tutorial #9 - The Resolve Function
Net Ninja
GraphQL Tutorial #10 - Testing Queries in Graphiql
Net Ninja
GraphQL Tutorial #11 - GraphQL ID Type
Net Ninja
GraphQL Tutorial #12 - Author Type
Net Ninja
GraphQL Tutorial #13 - Type Relations
Net Ninja
GraphQL Tutorial #14 - GraphQL Lists
Net Ninja
GraphQL Tutorial #15 - More on Root Queries
Net Ninja
GraphQL Tutorial #16 - Connecting to mLab
Net Ninja
GraphQL Tutorial #17 - Mongoose Models
Net Ninja
GraphQL Tutorial #18 - Mutations
Net Ninja
GraphQL Tutorial #19 - More on Mutations
Net Ninja
GraphQL Tutorial #20 - Updating the Resolve Functions
Net Ninja
GraphQL Tutorial #21 - GraphQL NonNull
Net Ninja
GraphQL Tutorial #22 - Adding a Front-end
Net Ninja
GraphQL Tutorial #23 - Create React App
Net Ninja
GraphQL Tutorial #24 - Book List Component
Net Ninja
GraphQL Tutorial #25 - Apollo Client Setup
Net Ninja
GraphQL Tutorial #26 - Making Queries from React
Net Ninja
GraphQL Tutorial #27 - Rendering Data in a Component
Net Ninja
GraphQL Tutorial #28 - Add Book Component
Net Ninja
GraphQL Tutorial #29 - External Query File
Net Ninja
GraphQL Tutorial #30 - Updating Component State
Net Ninja
GraphQL Tutorial #31 - Composing Queries
Net Ninja
GraphQL Tutorial #32 - query variables
Net Ninja
GraphQL Tutorial #33 - Re-fetching Queries
Net Ninja
GraphQL Tutorial #34 - Book Details Component
Net Ninja
GraphQL Tutorial #36 - Styling the App
Net Ninja
GraphQL Tutorial #35 - Making a Single Query
Net Ninja
Build Apps with Vue & Firebase - Udemy Course
Net Ninja
Updated Vue & Firebase Course (Udemy)
Net Ninja
Vue & Firebase Real-time Chat (Preview) #1 - Intro
Net Ninja
Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Net Ninja
Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Net Ninja
Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Net Ninja
Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Net Ninja
Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Net Ninja
Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Net Ninja
Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Net Ninja
Object Oriented JavaScript Tutorial #1 - Introduction
Net Ninja
Object Oriented JavaScript Tutorial #2 - Object Literals
Net Ninja
Object Oriented JavaScript Tutorial #3 - Updating Properties
Net Ninja
Object Oriented JavaScript Tutorial #4 - Classes
Net Ninja
Object Oriented JavaScript Tutorial #5 - Class Constructors
Net Ninja
Object Oriented JavaScript Tutorial #6 - Class Methods
Net Ninja
Object Oriented JavaScript Tutorial #7 - Method Chaining
Net Ninja
Object Oriented JavaScript Tutorial #8 - Class Inheritance
Net Ninja
Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Net Ninja
Object Oriented JavaScript Tutorial #10 - Prototype
Net Ninja
Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Net Ninja
Related AI Lessons
⚡
⚡
⚡
⚡
How to Create a Second Version of Yourself Inside Obsidian Using AI (Step-by-Step Guide)
Medium · ChatGPT
How to prepare for Spain civil service TIC exam using AI in 2026
Dev.to · David García
Going Viral! How I Created AI Kissing Videos Step by Step Easily Using AIAI.com
Medium · AI
How to prepare TIC teacher exams in Spain with AI (oposiciones 2026)
Dev.to AI
🎓
Tutor Explanation
DeepCamp AI