Flutter & Firebase App Tutorial #24 - User Data Model

Net Ninja · Beginner ·🛠️ AI Tools & Apps ·6y ago

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 Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Net Ninja
2 Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Net Ninja
3 Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Net Ninja
4 GraphQL Tutorial #1 - Introduction to GraphQL
GraphQL Tutorial #1 - Introduction to GraphQL
Net Ninja
5 GraphQL Tutorial #2 - A Birdseye View of GraphQL
GraphQL Tutorial #2 - A Birdseye View of GraphQL
Net Ninja
6 GraphQL Tutorial #3 - Project (stack) Overview
GraphQL Tutorial #3 - Project (stack) Overview
Net Ninja
7 GraphQL Tutorial #4 - Making Queries (front-end preview)
GraphQL Tutorial #4 - Making Queries (front-end preview)
Net Ninja
8 GraphQL Tutorial #5 - Express App Setup
GraphQL Tutorial #5 - Express App Setup
Net Ninja
9 GraphQL Tutorial #6 - Setting up GraphQL
GraphQL Tutorial #6 - Setting up GraphQL
Net Ninja
10 GraphQL Tutorial #7 - GraphQL Schema
GraphQL Tutorial #7 - GraphQL Schema
Net Ninja
11 GraphQL Tutorial #8 - Root Query
GraphQL Tutorial #8 - Root Query
Net Ninja
12 GraphQL Tutorial #9 - The Resolve Function
GraphQL Tutorial #9 - The Resolve Function
Net Ninja
13 GraphQL Tutorial #10 - Testing Queries in Graphiql
GraphQL Tutorial #10 - Testing Queries in Graphiql
Net Ninja
14 GraphQL Tutorial #11 - GraphQL ID Type
GraphQL Tutorial #11 - GraphQL ID Type
Net Ninja
15 GraphQL Tutorial #12 - Author Type
GraphQL Tutorial #12 - Author Type
Net Ninja
16 GraphQL Tutorial #13 - Type Relations
GraphQL Tutorial #13 - Type Relations
Net Ninja
17 GraphQL Tutorial #14 - GraphQL Lists
GraphQL Tutorial #14 - GraphQL Lists
Net Ninja
18 GraphQL Tutorial #15 - More on Root Queries
GraphQL Tutorial #15 - More on Root Queries
Net Ninja
19 GraphQL Tutorial #16 - Connecting to mLab
GraphQL Tutorial #16 - Connecting to mLab
Net Ninja
20 GraphQL Tutorial #17 - Mongoose Models
GraphQL Tutorial #17 - Mongoose Models
Net Ninja
21 GraphQL Tutorial #18 - Mutations
GraphQL Tutorial #18 - Mutations
Net Ninja
22 GraphQL Tutorial #19 - More on Mutations
GraphQL Tutorial #19 - More on Mutations
Net Ninja
23 GraphQL Tutorial #20 - Updating the Resolve Functions
GraphQL Tutorial #20 - Updating the Resolve Functions
Net Ninja
24 GraphQL Tutorial #21 - GraphQL NonNull
GraphQL Tutorial #21 - GraphQL NonNull
Net Ninja
25 GraphQL Tutorial #22 - Adding a Front-end
GraphQL Tutorial #22 - Adding a Front-end
Net Ninja
26 GraphQL Tutorial #23 - Create React App
GraphQL Tutorial #23 - Create React App
Net Ninja
27 GraphQL Tutorial #24 - Book List Component
GraphQL Tutorial #24 - Book List Component
Net Ninja
28 GraphQL Tutorial #25 - Apollo Client Setup
GraphQL Tutorial #25 - Apollo Client Setup
Net Ninja
29 GraphQL Tutorial #26 - Making Queries from React
GraphQL Tutorial #26 - Making Queries from React
Net Ninja
30 GraphQL Tutorial #27 - Rendering Data in a Component
GraphQL Tutorial #27 - Rendering Data in a Component
Net Ninja
31 GraphQL Tutorial #28 - Add Book Component
GraphQL Tutorial #28 - Add Book Component
Net Ninja
32 GraphQL Tutorial #29 - External Query File
GraphQL Tutorial #29 - External Query File
Net Ninja
33 GraphQL Tutorial #30 - Updating Component State
GraphQL Tutorial #30 - Updating Component State
Net Ninja
34 GraphQL Tutorial #31 - Composing Queries
GraphQL Tutorial #31 - Composing Queries
Net Ninja
35 GraphQL Tutorial #32 - query variables
GraphQL Tutorial #32 - query variables
Net Ninja
36 GraphQL Tutorial #33 - Re-fetching Queries
GraphQL Tutorial #33 - Re-fetching Queries
Net Ninja
37 GraphQL Tutorial #34 - Book Details Component
GraphQL Tutorial #34 - Book Details Component
Net Ninja
38 GraphQL Tutorial #36 - Styling the App
GraphQL Tutorial #36 - Styling the App
Net Ninja
39 GraphQL Tutorial #35 - Making a Single Query
GraphQL Tutorial #35 - Making a Single Query
Net Ninja
40 Build Apps with Vue & Firebase - Udemy Course
Build Apps with Vue & Firebase - Udemy Course
Net Ninja
41 Updated Vue & Firebase Course (Udemy)
Updated Vue & Firebase Course (Udemy)
Net Ninja
42 Vue & Firebase Real-time Chat (Preview) #1 - Intro
Vue & Firebase Real-time Chat (Preview) #1 - Intro
Net Ninja
43 Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Net Ninja
44 Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Net Ninja
45 Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Net Ninja
46 Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Net Ninja
47 Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Net Ninja
48 Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Net Ninja
49 Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Net Ninja
50 Object Oriented JavaScript Tutorial #1 - Introduction
Object Oriented JavaScript Tutorial #1 - Introduction
Net Ninja
51 Object Oriented JavaScript Tutorial #2 - Object Literals
Object Oriented JavaScript Tutorial #2 - Object Literals
Net Ninja
52 Object Oriented JavaScript Tutorial #3 - Updating Properties
Object Oriented JavaScript Tutorial #3 - Updating Properties
Net Ninja
53 Object Oriented JavaScript Tutorial #4 - Classes
Object Oriented JavaScript Tutorial #4 - Classes
Net Ninja
54 Object Oriented JavaScript Tutorial #5  - Class Constructors
Object Oriented JavaScript Tutorial #5 - Class Constructors
Net Ninja
55 Object Oriented JavaScript Tutorial #6 - Class Methods
Object Oriented JavaScript Tutorial #6 - Class Methods
Net Ninja
56 Object Oriented JavaScript Tutorial #7 - Method Chaining
Object Oriented JavaScript Tutorial #7 - Method Chaining
Net Ninja
57 Object Oriented JavaScript Tutorial #8 - Class Inheritance
Object Oriented JavaScript Tutorial #8 - Class Inheritance
Net Ninja
58 Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Net Ninja
59 Object Oriented JavaScript Tutorial #10 - Prototype
Object Oriented JavaScript Tutorial #10 - Prototype
Net Ninja
60 Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
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)
Learn to create a second version of yourself inside Obsidian using AI with a step-by-step guide
Medium · ChatGPT
How to prepare for Spain civil service TIC exam using AI in 2026
Learn how to prepare for the Spain civil service TIC exam using AI in 2026, boosting your chances of success with technology-driven study techniques
Dev.to · David García
Going Viral! How I Created AI Kissing Videos Step by Step Easily Using AIAI.com
Create viral AI kissing videos using AIAI.com in a step-by-step process, leveraging AI technology for creative content creation
Medium · AI
How to prepare TIC teacher exams in Spain with AI (oposiciones 2026)
Prepare for TIC teacher exams in Spain using AI with these actionable steps
Dev.to AI
Up next
AI in Care - Katie Furey, Pairly.com
The Access Group
Watch →