Firebase Authentication and Flutter Full Course 2020 | Messaging App (Part 1)

[Music] hello friends germany and welcome to this course we are going to be building a flutter application using firebase as a backend and this is what the app looks like it's a chat application which runs on the web with flutter web and also on the mobile we're able to authenticate using google sign-in so when i click on that and select an email i'm now signed in i can type a message and hit send which pops up here like so and then on the mobile we see that the message also appears here which contains the name of the sender as well as the sender's avatar retrieved from their google account i'm also able to sign in here and i'm also able to respond at this point i can also reply to the message and it appears like so we can also delete a message by swiping the message to the left or right we can sign out of our app by clicking the log out button at the top right which signs us out and we can also do the same here okay so if this looks good so far be sure to smash the like button this course is going to be quite detailed so it comes in two parts this is part one of the course if this is your first time to the channel be sure to hit the subscribe button and the bell notification icon so you don't miss out on future tutorials demonstrating how to build full stack applications with dart and flutter and without further ado let's get into it we're going to start this project from scratch and before we go ahead and run the flutter create command i want to draw your attention to the docs so specifically this bit where we need to create a project with web support so before we do flutter create go ahead and run these three commands which will enable flatter web support in our project because we're going to be running our app on the web as well and once you've done that then cd into any directory and then type flutter create and then the name of our project which we call the chat crew and when that is done just cd into the chat crew and then let's open this in vs code let's go ahead and run our flutter app so i'm going to select a and let me just dock that to the side and then let's go ahead and open our main.dart and i'll just run this project okay so we've got a flutter project running with the basic boilerplate example what i'm gonna do is to clean this up a bit more so i'll get rid of all these comments i'm going to remove some of these widgets so we don't need the floating action button for instance i'm going to get rid of this center widget and then i'm going to remove these two text widgets i'll remove these as well so it should look like this now okay let's go ahead and hide the debug mode banner so that's gone now i'll change the primary swatch in our theme data to purple then i'll change the title of our material app and the title in the app bar to the chat crew and i'll scroll down over here to our app bar widget i'll center the title like so i'll set a background color for our scaffold and we're going to set a hexadecimal value so i'll start by setting the opacity ox ff simply means 100 opacity and then followed by the actual swatch so it's dee 2d6 and that looks like that i'm going to have two widgets in here so the first one will be an exp an expanded widget which for now will take a container as a child and then the second widget will be a container i'll give this container a child and let's just make a text widget for now that says sign in so we should see it at the bottom here like so i'm going to add some padding around this container so we'll have edge inserts dot all and i'll just give it a value of five and then in fact for our text we are going to render a button instead so to do that i'm going to install a package called flutter sign in button which allows us to render a special kind of button with the google logo next to it it's more of a convenience widget if anything i know i can use the flat button or raw material button but this makes it much more convenient so just use that and i'll import that package like so and over here we can use it by rendering the sign in button widget and then we need to specify the type of button it is so we do buttons dot google and for now on pressed will be set to an empty function okay we got a flatter error unable to load asset so let's stop and start this app again because this package comes with a couple of assets image i said so we need to restart the app in order to load those assets in so now we can see the button here like so i'll add some padding to this which now should look like that at this point it's now a good idea to go into firebase and set up our project and also enable authentication so let's do that now over here in our firebase console we can click to add a new project and then the project name will be the chat crew and i'll disable analytics it'll take a couple of moments to create our project and once it's ready i'll continue which brings me here and what i want to do is to go into my project settings by clicking this icon here and then clicking project settings and at the bottom here where it says your apps we need to add an android app in a web app so i'll click android and i'll type in the name of the package which for now is com.example.d chat crew and then the app nickname will be the chat crew and we need to generate a debug sign-in certificate in order to do that you can check out these docs if you scroll down here you can copy this command and then run it on your mac linux and also there's a command for windows which will give you an output containing this piece of string here i've gone ahead and done that already so i'll do that and i'll register my app next i need to download this config file and place it within the android directory of the flatter project so i'll do that and let's go ahead and do that now so expand android expand app and then we drag it in like so once that's done click next and we need to do this bit as well so in our project level build.gradle file we need to add a couple of lines so i'll copy this line and then in this build.gradle file which is directly on the android we need to add this line and the dependencies and also check to make sure that repositories has got google added as a repository and also under here as well so i'm going to save this under the app level build.gradle file we need to add this line so on the app build the gradle over here we need to add that and make sure this is here as well and then under dependencies i'll copy that and then i'll add it here and once that is done click next and then it says you're all set and then from here on now we can continue to the console and then we get this we're going to go ahead and add another app so the web app so click on web and then the name of our app same the chat crew you can click register app to register it and then we have this bit of code that we can copy and paste in our index the html so i'll copy that i'll close this android folder and then open web and then index.html and right before main.js i'll paste the code here and then i'll go ahead and continue to the console so now we've got two of our apps added we will also go ahead and add the sdks for the particular firebase products we want to use so firebase auth firebase cloud store so i've got these here and i'll make sure it's the correct version number if you also want to find out these you can visit this url here okay so i can close this one now and next we need to set up firebase auth in order to build our login flow so click on authentication under the develop menu click on get started and we want to enable the google sign-in method so i'll click on edit configuration toggle enable i'll select the support email which is the email i used to create this account and i hit save you can also configure a list of authorized domains just make sure localhost is on there as well all right okay so from here we're going to set up firebase auth on our flatter project so we need to install a couple of packages so firstly we'll install firebase core and then we'll install firebase auth and before we progress to using these plugins i'm going to move this widget out of this file into another one so i'll create a new folder on the lib and i'll create a new file called main screen dot dot and let's grab all of this and paste it in here i'll import flutter material and let's import the firebase packages for now being firebase oauth and then i'll copy this import here as well flatter sign in button so i'll save this and then let's import the main screen dot dot file okay i'll go ahead and collapse this one and this one as well because we're not going to be touching those at least not yet we are going to implement our authentication logic in a class called auth provider so under source i'll create a new folder i'll call it auth and in here i'll start by creating an abstract class which will be essentially used as an interface for our android and web implementations of the old provider because they're different since they're different platforms so let's create a file called auth provider base dot dot and then in here i'll import the firebase core and firebase auth packages like so and then i'll create my class called auth provider base this alt provider base class takes in two methods so one method returns a firebase app instance it's a future and i call it initialize that contains our initialization logic and then the second one returns a user credential which will be given to us once we sign in successfully so i'll just call it sign in with google okay so from there we can have our android and web implementations so i'll create a new file and then i'll call it android port provider and then in here we're going to import firebase core and firebase auth we'll also import our auth provider base class and let's create our class so we'll call it android auth provider implements or provider base in fact we'll make this a private class and we're going to overwrite our two methods each method will be marked as async because we're using a sync away syntax so in our initialize function we're just going to return and we'll await on the initialize app method and we'll send in our options so this takes in a name which is the chat crew and takes in a list of options like so and the options we're going to be configuring is similar to what we placed in the web directory so i can in fact copy these and paste it here like so the only change i need to make is the app id because that's for the web if i'm not mistaken i think i can do that for android but let me go to the dashboard and double check so under project settings i'll copy this app id for android and let me paste that here yeah it was actually slightly different a good idea to make assumptions okay that's good to implement our sign-in logic our implementation is as follows we need to trigger the authentication flow and in order to do that we actually need to install another package so this is the google sign-in package and what google sign-in does is it triggers the native authentication flow for android and then the logic for all of this it's in the docs so if you go to on authentication social loss and then under google we've just done this so secondly we just need to copy this logic and then we'll replace all these to do's with that like so and let me go ahead and import the package we installed so what's happening is we trigger the authentication flow which will just display the native prompt on the android device and we'll go through signing in and then once we sign in we can we can retrieve the sign-in details which contains an access token and an id token and with those will create a credential which will be passed in to sign in to firebase so i'll save this and we are going to export this class by creating a public auth provider you may be thinking why we're doing this instead of just making this public and using this directly which is because for the web implementation also be using the same class name and then we'll conditionally import each class depending on the platform we're running on but we're going to be looking at that later for now just do this and it should be good okay we're done with these files now so over here in our main screen state i'll go ahead and define a sign-in method i'll make this async let's have this in a try catch block just in case we get any exceptions and what we're going to try is sign in so i'll create a variable called creds and let me import our oauth file and then we'll do all provider dot sign in with google so if we sign in successfully then we should be able to print out the credentials to the console if for some reason it fails then let's print out login field okay and we need to use this method down over here so i'll copy that and paste it here okay so let's look at our debug console i may have to do a hot restart so let me do that now okay so i click sign in okay let me stop the whole app and then start the whole app again okay let's try and sign in again right okay so now that shows us that and let me sign in with my email and then i will type in my password [Music] okay then it takes you through all of these and now just click yes to avoid any issues okay agree and i'm not going to backup click accept and and then that should okay it says login filled no firebase app has been created right my bad so we need to initialize yeah we need to call the initialize method i forgot to do that so in our main.data to import our android provider i'll mark this as a sync and before we run our initialize method since it's asynchronous we need to do widgets flatter binding dot ensure initialized else you got an error showing up and then we'll initialize firebase and then run our app so i'm going to stop and then let's start it again so let me go ahead and click sign in and then we've now been able to sign in because we got these user credentials over here as such because we went through designing flow android doesn't take us through that again because we already signed in the first time but we can see all these details here i'm gonna bless some of these out but there are details like given name family name and so on and so forth my picture email address and other bits of information also if we come to our firebase dashboard and we go to authentication we see that there's a new entry added here and this is the email that i just signed in with and each user is given a unique id number as well okay so now that we've proven that the sign-in works i can close this and then we'll come back to our main screen dot dart file okay so what we're going to do from here on out is once we signed in we'll set a state property called signed in to true so we'll do something like that we'll sign in and once we've signed in i'll go ahead and do a set state signed in and set it to to true so at this point we can work on our sign out logic and in order to do that we'll show the sign out button when we've successfully signed in that's the in fact before we get to our sign out logic let us hide this container once we successfully signed in so i'll say if signed in if not signed in then we'll hide this container and i'll make sure to set this to false like so and let's test this out right now so hit sign in and then it disappears because we successfully signed in to the app so let's look at the logout scenario so under in our app bar widget i'll configure a list of actions i'll have the same logic here so if signed in then we'll render an inquil widget on tap we will invoke a signed out method it doesn't exist yet but we're going to implement it soon and the child of this inquire widget will be an icon and which renders the log out icon and let's define the sign out method quickly okay so let's run this and that gives us this button here let's add some padding to the left and right of it so i'll refactor this and i'll wrap this in a padding widget and let's set padding on the horizontal axis i'll set it to 15 which looks like that now and i've got it the other way around i meant to have the inkwell wrapping the padding instead yeah so that looks good enough to me okay so for our sign out logic this will also be an asynchronous method and then we'll do five is auth dot instance dot sign out and once we sign out we can update our state by setting signed in to false so if i go ahead and i click this then we're signed out and then we're back to square one this looks good so far let's look at the message form that'll pop up at the bottom once we're logged in and to do that i'm going to create another widget for that so let's create a new file and and we'll call this new file message form dot dot in fact i create new folder i'll call it widgets and then i'll place this in there like so our message form imports flutter and we'll create a stateful widget we'll call it message form and then we'll have a container with a text widget for now now just put form goes here let's import this into our main screen and then let's use it over here so i'll say if signed in we will render our message form or else we'll just display the container so i'll save that and let's go ahead and sign in and there we go we have form goes here so we'll come to our message form let's get this container a temporary color of blue just so we can see it okay and the child of this container will be a row widget and then the first child of the row widget will have a text field and in fact we're going to wrap this text field in an expanded widget because we want the width to be as full as possible and then the second widget we're going to be rendering will be a raw material button we will set the unpressed event of this button to an empty function for now the child of this button will be a text widget and it will just say send and let's see what that looks like so that looks like that okay let's add a fill color to this button and we'll take the fill color from the theme in particular the primary color we can style the text by making the color white and then the font size 14. and let's make it bold okay let's adjust the shape of this raw material button by setting a rounded rectangle border i'll set the border radius to a circular radius and set it to five just to round out the corners a little bit like so and let's pat out this text a bit as well so i'll put down the padding widget and let's increase this to 16 so like that we'll come back to our text field and we'll give this a decoration which is an input decoration let's set a hint text to type a message let's fill it with a color by setting filled to true and then fill color to white so that should look like that you can also set the border an outline input border where the border radius is also a circular border and we set the border side to none and next let's set the padding of the content area all around and we'll set it as 10. then lastly we just need to get some padding on the outer part of the widget and also between these two widgets so add a padding to the current container and give a value of five and then between this expanded widget and the raw material button i believe we can have a sized box the width set to five and that looks like that so right now if we get rid of the blue then it looks like this okay so next what we need to do is what happens when we type in this text field yeah you notice that it just scrolls off that way when we type rather than the cursor jump into the next line so we can sort that out by adding a couple of options to our text field widget so such as the minimum amount of lines to one and we can set the max lines to let's just say three for now so which will look like that so when it gets to line 4 then we get scrolling through the text but for our use case i'll set it to 10 so we can have long lines of text and we need to set an option to the row widget just to ensure that the setting button sticks to the bottom and we can do that by setting the cross axis alignment to end like that and everything else should work pretty nicely okay so in order to be able to capture the message of our text field i'm going to create a state property called message and then over here in our text field i'll have uh define an unchanged event which contains the value of the text field and then we'll pass that to our message and in order to grab this message let's define an unpressed event which will be a function for our button and then at this point let's just print out the message and then i can pass that in here okay so if i open the debug console and then i click on send then we get null for some reason okay let me try and do a reload quickly i'm going to stop and start the app again you can hit f5 to run the app let's sign in okay let me type something and i hit send okay so we've got lorem ipsum back and let's amend this a bit further so in our message form we only want to send if message has a value because if i clear this this text field and hit send we're still printing out we are printing out an empty string so that's not the effect we want so to handle this you can check a couple of things we will disable this button if the message is empty or it's now so we'll say if message is now or message is empty then we'll set on press to now which will disable the design button or else we will set unpressed to the unpressed method and in order to get this working we need to wrap this in a set state function like so i may have to do a hot restart but let's test it out okay so nothing happens when i click send because it's empty by typing a letter then then it gets captured okay so that works quite well i guess what i can also do is to have the same condition for the fill color so if it's that then we'll set the fill color to colors dot let's say blue gray or else we'll render the primary color so if i go ahead and i delete that then it's grayed out if i click that then it comes back to that and i'm able to submit it also what we want to do is to prevent the same message being submitted multiple times we need to clear the value of this field the minute we hit send and in order to do that we we need to define a controller that would do that for us because you might think it involves just setting message to an empty string and that should clear the field but but it's not going to work for us so i'll define a text editing controller and then for text field i'll pass the control line here and then on pressed what we'll do is we will do controller dot clear and then reset the message back to an empty string as well so if i open the debug console and then i type a character and i hit send then it logs out was the message and then it clears the goes ahead and closed the text field but then when i hit send again we get that same problem so we also need to do a set state like so so let's test it out type it character i hit send then we run set state and then that grays out again so before we get to setting up cloud firestore we need to export this message out of this widget to the parent widget to our main screen so i'll define a value changed property which is of type string and i'll call this on submit so value changed is a type def it's basically a function that takes in an argument or that exposes an argument and we use that because over here we are going to do widget dot on submit and we're passing in message as the argument and lastly we need to define this here like so which therefore means that in our parent widget where our message form is will define an unsubmit function containing the value of the message and i'll just do a print for now so let's test this out i'll adjust this a bit like so okay so let's test this and when i hit send you get lorem ipsum back so that proves this bit is working so at this point it would be good to go ahead and set up cloud firestore and to do that i'll come back to the dashboard i'll click cloud firestore and then i'll click create database and i'll just leave it to production mode we're going to change it anyway i'll hit next select a location and enable it takes a while initially but you only need to do this once and once cloud firestore is created the first thing we're going to do is to come to our rules right now the rules for our documents has read and write disabled so what we're going to do is we're going to allow we're going to allow our app to read from our collection and we're going to allow our app to write and we're allowing right only if it's an authenticated user so to check that the user is authenticated you can do if request dot alt it's not equal to null which means that anyone can read but in order to write it has to be an authenticated user so doing that we can go ahead and publish it and that should put us in a good place i'll come back to data and let's create our first collection i'll call it chat messages and let's add our first chat message this will take in a couple of fields we'll have an author field which will be a string containing an author for now i'll just put germaine next field will be an author id which will be the id of the signed in user the uid value of that so for now i'll just put one we'll have a photo url which we can retrieve from the credentials of the sign in user for now i'll just put a placeholder image we'll have a timestamp and the type of this the timestamp option but i'm going to use a number and i'll put one two three four because i want a i want the timestamp as an integer instead so in milliseconds it's much more flexible to work with our first document will also contain valley and for now we'll just say hello world and then i'll go ahead and hit save so this is our first entry here like so and let me just go back and and then let's go to our code and try and pull this in okay so in order to pull in our first message well we need to install the cloud firestore package by doing crawl out cloud firestore and once that's done we will import that over here like so and then i'm going to change this child to a stream builder widget because we're reading we're going to read our messages in as a stream and the type of stream we want is a query snapshot and then the stream we're going to use is firebase firestore dot instance dot collection and then the collection we called chat messages and then we do dot dot snapshots and then we define a builder function containing the context and our stream snapshot so over here we can do if snapshot has data so we'll check if there's data in the snapshot then for now let's just return a text widget which will have the snapshot data when we do docs we get the first item in the docs and we do dot data and we'll invoke the two string method or else we'll just return a center widget with a circular progress indicator i spin an icon so let's check this one out and i need to stop and start this up again okay looks like we had a problem starting this up okay we got this issue with dex archives this was actually mentioned in the docs so let me pull it up so if we look at the docs it says due to the large number of classes in some of the firebase sdks especially specifically firestore which is what we just installed they may bump you over the 64k method limit on the android build system and we got this error so we just need to enable multi-decks support so let's let's do that now so if we go to android and we open app build.gradle and then under default config we need to set multi-dex enable to true and then we need to add a dependency for multi-decks alternatively if you're trying to target android sdk 21 and above i believe you can set the minimum sdk version to 21 and that should be fine but in our use case i don't mind adding these two so once these two are done just save and then let's run our app okay you can see that file store is giving us our first entry and if i go ahead and sign in we have our form right so that is good let's look at how we present this a bit better right so we're going to create a another widget that will handle the rendering of these messages well it's going to be a couple of widgets so i'll collapse this and then on the source widgets are creating new widget called message wall we will import the dependencies we need we'll create a stateless widget we'll call it message wall and then in the build function we will return a list view so i'll do listview.builder this list view needs a list of messages so let us go ahead and define some properties which takes in the data from our collection so the first one will be our messages list which is of type query document snapshot and then this will be called messages then we need to pass it in here by doing this.messages and so in our list view builder the item count will be our length of messages and then the item builder so what each message would look like will for now be a list tile widget we're going to change this but just just to show that it works so the title will be messages and we'll grab the first index and then we do dot data and then we want the value so from here we'll go to our main screen and then let's import our message wall and then we'll use it here and now messages will be snapshot.data dot docs and let's fix our error if we come to message wall we yeah i need to make this a text widget my bad i always forget okay cool so we got our first message hello world displayed here all right so let's go a bit more in depth to this one we're going to create another widget that'll handle the display of these messages so i create a new file i'll call it chat message other dot dot i'll import flatter and i'll create a stateless widget called chat message other because there's going to be a difference between chat messages from other people and messages from the user that's currently logged in and chat message ada will take in a couple of fields so we're taking an index we're taking the data which is a map object of string and dynamic in value yeah and then let's define these here like so and then the child of this container will start with a column widget because we'll display the avatar and a message next to it our first child will be a circle avatar with a background image this will be a network image and the url will be the photo url field in our data and let's let's try and display this now so i'll come to our message wall i'll import chart message other and have that here instead we'll pass in the index and then pass in the data like so okay so that looks like that now and in fact we need a row widget we're going to add a column later and right next to the circle avatar we'll have a container we'll set a decoration particularly box decoration because we want to give it a white color for the container and then give it a border radius or value five and then the child of this container will have a text widget and then let's have the value so let's check this out okay so that looks like that so at this point we need to style it so that it looks a bit better so between these two i add a size box to add some spacing like that and then i'll set the cross axis alignment of the row to start so they're lined up at the top i also set a maximum width for this container so the messages extend the width of the message will be no bigger than 300 and the way we do that is not by setting the width because if we set the width to 300 then it will look like that which is what we don't want we want the text to expand till it reaches a width of 300 and stop there so we need to say maximum width and the way we do that is by setting some box constraints like so and we'll set the max width to 300. so the text will keep extending till it reaches 300 width so we can even try that here like so and yeah so the minute it reaches 300 width will just fall to the next line okay let me undo all of that okay cool let's give this container some padding so i say horizontal to turn and then vertical to a little bit over 10. all right so it looks like it's coming together quite well we need to display the author so i'm going to refactor this text and wrap it with a column widget and then we'll have a text another text widget before the message containing the author so we do data and then we'll retrieve the author set and then we'll show the value yeah so like that let's shift the column to the start so we do cross axis alignment dot start and i'm going to add some styling to this i'll give it a color a font style okay you can set the font size make it slightly smaller okay and let's make it bold right so let's make the font slightly bigger yeah we also add a sized box just to space it out a bit so a height of five yeah that's good enough okay let's add a margin around the container so it's not stuck to the edge so we'll have symmetric and then on the horizontal axis we'll have 10 on the vertical axis we'll have six like so and this concludes the first part of this full course if you enjoyed it smash that like button if you are not a subscriber hit the subscribe button and the bell notification icon so you don't miss out on the next update if you've got any questions about this course let me know down below in the comments and i'll see in the next one thank you

Channel: Creative Bracket • Dart and Flutter Tutorials

Views: 12,441

Keywords: dartlang, dart tutorial, fullstack dart, firebase flutter, flutter course

Id: oyVDDRczuJI

Length: 60min 51sec (3651 seconds)

Published: Thu Nov 19 2020

Reddit Comments

[u/A-PRYME]

no FCM?

[u/IamFromNigeria]

Thanks, but I am looking for a script to build a simple delivery Logistics app with Firebase.

[u/IamFromNigeria]

Where's the video