Flutter & Firebase App Tutorial #7 - Streams

Key Takeaways

alright than my friends so currently we can sign in anonymously inside the signing widget and then we receive the result back which is a user object a custom user object and we can print out the UID of that user now what we really want to be able to do at this point is listen for that authentication change when we get that user and then show the home screen when that happens when a user signs in instead of just printing this to the console so then in the future if they then sign out we can also listen for that authentication change and then we can show them the Sign In screen again so we're protecting our home screen from unauthenticated users now remember inside our wrapper widget right here we can either show the home screen widget or the authenticate one or right here currently showing the authenticate one but we want this to be dynamic so when we're listening to those authentication changes this is going to be the place where we dynamically change what a user sees will it be the authenticate widget or will it be the home widget so this will change dependent on that result so first of all we need to be able to actually listen to those authentic ation changes and to do that we'll be using a stream so then what is a stream a stream is pretty much what it says it is it's a stream so you can think of it as like a real live stream that travels from one place a to another point B and on that stream you could play something at the source which would ultimately then travel to the destination along the stream so imagine that you wanted to say transport 50 rubber ducks from the source to the destination but you also had to pack each duck inside a box first of all so what you could do is you could box up all of the Ducks first and stockpile them and then send them all in one go when they're all boxed up together but that would mean waiting a significant amount of time over here before you get anything at all because you have to wait for them all to be boxed up now the good thing about streams is that we wouldn't have to wait for everything to be boxed up first of all each duck could be sent along the stream as it was boxed up meaning that at the source we'd have a constant income of box docks as they're being made now a similar thing is going to happen if we set up a string between our flutter app and the firebase off service the firebase off service is going to emit something to us every time a user either signs in or signs out and that something could add to be a null value if they signed out or some kind of user object if they signed in so elf flutter up is going to be able to receive those event objects when they happen and determine based on the value inside of them whether they're a user object or null whether a user is logged in on lockdown and at that moment we want to update our UI appropriately now the firebase Earth service has a stream built into it that we can listen to by invoking a function called on earth changed so we're going to take a look at that now and set it up inside our auth service class okay then so we want to set up this stream which is going to detect authentication changes and we want to do that inside our earth service class right here now I'm going to do it above this sign in a non function and I'm going to create a little comment to say what this is and it's just earth change user stream so let's set up this stream first of all it's a type stream and the data that we're going to be getting back from this stream is going to be a firebase user that's what it's a stream of okay because when a user signs in they're going to send us a firebase user back now it's a getter so we'll use the get keyword and we'll call this user but you can call it what you will okay so now what we want to do is return a stream inside here so we're going to return and it's built in to the firebase auth library so we're going to use this firebase auth instance first of all to grab that so underscore off and then it's dot on off and it's this one right here state changed we're returning this stream on this earth object and this stream is going to return to us firebase users whenever there's a change in authentication now that's absolutely fine but remember before we said we don't want to work with firebase users we want to work with our own custom user defined by this user model so what I'd like to do instead of getting a stream of 5/8 users every time a user signs in then I want to get a stream of normal users right so we can easily map this stream into a stream of users based on our user class by using the map method so let me come under here so there's more room for Matt and close off this file tree then I'll say dots so we're using this by the way on this on earth state change thing we're going to say dots and then map to map this to a stream of users based on I will use a class so inside this map method we can pass a function and we're going to pass in the firebase user and user that we get back to that function and inside the function all we're going to do is return user from and it's firebase user and we pass in that user so now every time we get back a firebase user inside the stream we're going to map that to a normal user based on our user class now right now we're getting a red line here because it's saying the return type is different we're not now returning a firebase use it in the stream we're returning a normal user based on our user class so we can just delete this thing right here and type user oops use it like that instead and now that red line goes away so this is absolutely fine now what we're doing here is setting up a stream so that every time a user signs in or signs out we're going to get some kind of response down this stream some kind of event to tell us look this is the current user that signed in or maybe null if the user signed out and then what we're doing is we're mapping that into our user so that in our app when we listen to this stream that user object is what we get back okay so we can grab that user object then and do something with it now there is a simpler way to do this map method right here we don't have to explicitly write out all of this function declaration what we can do is just say instead dot map by the way I'm going to comment this line out like so and we'll say dot map and all we need to do is pass in this right here so grab that and paste it in erect here and that is exactly the same this right here is exactly the same as this this functionality is implied so it passes the user that we get back down the stream into this function right here and it does the same thing so let me delete that middle line and now we have our stream set up so now when we use this we'll be setting up a stream listening forthe changes whenever a North change occurs we get back a value in the stream that value is either going to be a user object based on our user class if the earth change was the user signing in or it will be a null value if the user signs out and by the way you don't have to use a custom user class if you prefer to use the generic firebase user object I just like to abstract away from the firebase user to create a user object more suited to what I need in my app but anyway now that we've set this up in the earth service we need a way to access it in our root widget so that it can know whether a user is logged in or not and we're going to see how to do that in the next lesson