Flutter Firebase & DDD Course [21] - Note Cards UI

we've populated the real firestore database with a note but we are still showing only colorful placeholders in place of the note cards let's build an actual ui for them [Music] hello welcome to riso coder where you are getting prepared for real app development so that you will get freelance clients or a job and be confident about the apps you build so subscribe and hit the bell to join us on our quest for becoming in demand flutter developers so in this part we are going to replace all of these containers which are either red green or yellow for when there is a whole problem with a failure coming from firestore when we are trying to get any kind of notes we are going to replace these three containers with cards with an error card a success card and then lastly a critical failure widget let's start off with the note card which will be responsible for displaying successful data as you can see we are currently actually showing a green card in the list view that's because we already have one note in firestore which we have populated in there in the previous part but currently of course we cannot see the content of this node and this is going to change by the end of this part so we are now going to put the ui widget code directly into this else clause instead we are going to break it out into a separate widget which will live inside a separate file so let's do just that we are going to create a new file and call it notes card widget then dart it lives under presentation the notes overview feature or sub feature widgets and right here and as always you can get the code from the link in the video description so this is going to be a stateless widget let's call it note card card and let's import material dot dart this widget will need to hold a note so let's create final note note let's import the note entity and let's populate the constructor so as you can see the constructor will of course be able to get a key this should always be present especially for testing purposes when it comes to flutter and then of course note will be in there and let's make it required so add required with this done we can now just quickly come back to the notes overview body widget and replace this green container from the previous part with a note card and pass in a note which will come from this thing from this variable final variable here from the item builder of the list view now you can see that the green placeholder container has disappeared from the ui and this way we are going to be able to see what we are actually developing inside the note card widget so because it's called a card it would be wise to display a card in there a material card and card can have a child and this child should display things one under another firstly it should display the body of the note and then below this body which i can actually show you in the finished app there should be the to do's and if you want to display something below another that's the perfect use case for a column right so let's say column and this column will have children and these children will be a text which will display the body of the note so text note dot body and we want to get the actual string from this value object so we're just going to say get or crash and as we know already at this stage of trying to get the body out of the note we should not get any crashes because actually if there is some sort of a failure present inside one of the value object in the note you know what's going to happen we are going to not display a note card instead we are going to display this red container or the error card later on in this part so invalid data will never get actually to be displayed so we can be safe when we call get or crash in other case if we actually crash here we just know that we have some real issues in our app and we should fix them asap so crashing in that case is actually not that big of an issue because it's a breaking error and additionally as you can see we can immediately see something displayed inside of here but it's too small so we want to style this thing so we're going to say style it's going to be equal to text style and let's just set the font size to 18 you could use themes for that possibly not hardcode this in here but i think we're good with hard coding in this case so that's about it for the body of the note and the next thing which should be displayed here are going to be the to do's from the note so what we're going to do here is display the to do's together with a vertical offset from the top only if there are actually some to do's contained inside the note because it may as well happen that there are zero to do's and for that we are going to use the beautiful feature of dart which is specifically here for flutter and that is collection ifs so right inside this list we can say if note produce that length is greater than zero in that case we want to basically embed another list so we are unwrapping a list and labeling a list it's called somehow you know what i mean which will contain a constant size box with the height of four this will give us the vertical offset of four logical pixels from the top and then in order to display to do's we want to use a wrap widget a wrap widget is really cool because it puts its children next to each other we are going to do it in the horizontal direction and then as soon as there is not enough space in the chosen direction what's going to happen as you can see here for example here important things to do immediately in this cart the third to do is put to the second line this is what the wrap widget does if there is not enough space in the given direction for just one line it creates a second line and starts putting those widgets in the second line then inside the third line and so on until it runs out of widgets to display so this is why we are using the wrap widget and we need to give it children and the children is again a list which will contain notes to do's this to do's contains a list three of to do item and we need to map this list three of to do items into widgets so what we are going to do we first need to obtain the actual kt list which with which we can work so we call get or crash on the list three and then we can map this kt list we should be able to after we import kt dart right so import kt or package kt interesting kt dart i guess slash i know kt dart darts should be right actually it should be collection like that okay so this is what we need to import again you can get the code from the link in the video description and after importing this line uh we now have access to the extension methods so we can call map and we want to map the to do item to a respective widget which can be displayed and that widget will be called to do display it's going to again be a separate widget so that we do not clutter up this uh note card widget for now let's just uh map a to do simply to an empty container so that it kind of works okay and of course we need to take this kt list which is returned from the map function and convert it to an iterable which is native to dart which the flutter can then use because flutter does not understand kt lists of course it's a library we need to make flutter understand what we are actually talking about so we need to convert it to a native iterable we do that by calling this iter thing on the map on the kt list which is returned by the map and then in order to again unwrap this list we just provide this operator again those three dots and this way the wrap widget will display all of the to-do's appropriately of course currently we cannot see any to-do's because they are just displayed via an empty container so let's change that right we're going to come below the note card and let's create a widget called to do display so stateless to do this play it's gonna be a row because to do's are represented by a check mark and a text inside one row of course and we need to be able to get a to do over here into the to-do display widget so again we're going to have a final to-do item to do and let's create constructor for final fields like that awesome and actually let's make to do required again cool so now inside this row what do we want to do well actually of course firstly we want to display to do display instead of a container and pass in the to do to do now we can talk so over here inside this row we want to have children which is going to be either an empty checkbox or a filled in checkbox depending on whether the to do is done or undone so again we want to use collection ifs so if to do dot done we are going to say that we want to have an icon here icon icons dot check check box which is filled because we are talking about done to do and then the color of the icon will be the accent color from the theme so theme of context accent color okay we can see that now we have a done to do display because the data coming from firestore contains a done to do and otherwise so else or actually we cannot use else inside a collection if so we need to provide another if statement not to do dot done in that case we're gonna display again an icon but this time it's going to display a checkbox outline blank and the color will again come from a theme but it will be the disabled color cool okay now we can actually go to firestore actually we're going to come there a little while later on so let's just now focus on creating the text which will display the to do name so to do that name get or crash and now we should be all good we can see that we have a to do which is completed and it says learn all the widgets nice so now it's time to go to firestore console and once we hop in there go to the database data tab and let's edit the single node which we have created in the previous part actually let's create another to do right so it will be like it will be a map right map id will be some sort of id done will be boolean will be not completed and then name i guess will be hello complete me add okay this should work right so if we come over to the app again we see that it kind of is not working for some reason the real-time aspect of firestore has failed that's probably because i've been running this app for quite some time and it's kind of disconnected i guess so let's hard restart the app okay and we can immediately see that the new to do was added in there and it says hello complete me which is nice so we know it works if we make the to-do name shorter it should theoretically be displayed in just one line so let's just say hey and now that it's shorter really unless we have done some sort of an error in building the ui it should be displayed in just one line and sure enough we have made some sort of an error while building the ui and i can immediately spot what we've done wrong actually i have done it wrong you have no no parts in my errors when i'm building a tutorial app but anyway the main axis size should be main exercise minimum so as it says here basically the main axis when it comes to a row is the horizontal axis and this minimum will make sure that it takes up as little space as possible given by its children and this will allow us to do this display the all of the you know these to do's inside a single row if possible inside a single line okay so technically this is all we really need to do in order to display something meaningful to the user inside the note card widget but it surely does not look very appealing it's kind of centered the to-do's are really clogged into just a small space so let's change that by providing some meaningful padding and all that so what are we going to do here well we are at first going to provide spacing to the toudus which is done through the wrap widget which displays all the to do's so spacing let's give it eight pixels and it starts to look better and then inside the column let's play with the cross axis alignment let's try to set it to start let's see what happens it kind of looks like this and i think that's looking pretty nice right so let's leave it at start but now all of the child widgets of the column are crammed to the left side in the case of a left to right ui so what we need to do here is again wrap the column inside another widget which is going to be padding in this case and we can actually leave it at 8 pixels now it's padded and it's looking much much nicer now what we have left out from all of the possible note entity fields is indeed the note color we are not utilizing it anywhere and what we should do is give a color to the card according to the color of the note so thankfully card has this beautiful color property which we can utilize so we're just going to say note color get or crash again and here we go the color of the note kind of changed i'm not sure if you could even see that let's actually go again back to firestore and i'm going to change the color to something i'm not sure what it's going to come out as let's just swap a few numbers in here i'm really not certain what i'm doing but it surely should change the color right it did it's looking kind of weird right now but hey it's at least some sort of in color which you can hopefully see on youtube a little better so that's cool now we are still not fully done with the note card widget yet that's because if we take a look at the finished app when i long press on a note we should be presented with a dialog allowing us to delete the given note from the firestore database so we need to have a way to register long tabs on our note cards and then show a dialog there are multiple ways to do this but because we also want to have a nice ink splash animation as per material guidelines whenever a user touches a card we of course want to use an inquel so we are going to wrap this padding inside a widget called inquil and now we need to set a few things up on tap which means a short tab this will be handled but only later on because whenever we tap on a note once we have the note form page of course implement it then we are going to be able to navigate to that note form and edit the given note as you can see here we can edit notes so we are going to implement this only later on so to do implement navigation but on long press we can implement even now what we're going to do here is get hold of the note actor block so let's say context or actually block provider so that we import the block or actually flutter block package now we can use the extensions because they are also imported by that by the virtue of that previous import context block of type note actor block like that and with this done we also want to show a dialog with all of those buttons allowing the user to delete the given note and deleting the node will of course happen by calling add note actor block event deleted and passing in the notes right but this should only be called this event should be added to the block only after the user confirms through the dialog that they truly want to delete the note right so in order to do that we are going to break out the dialog into a separate method so that again we do not clutter up this on long press handler this anonymous function so still inside the note card widget we're going to create a private method void show deletion dialog and this is going to accept build context context and also the note actor block right note actor block and let's do something over here we want to show a dialog context is context and then showing a dialog also require us to specify a builder which will build the of course the ui for the dialog so what do we want to do inside of this builder let's return an alert dialog and this alert dialog can have a title and it's going to be really simple let's just say cons text selected note so that the user knows which note he selected the content of the alert dialog will show the body of the note so it's going to be a text notes dot body again get or crash and it's quite important to limit the length of the text of the notes because as you can see in the finished app this kind of a long note uh is going to be limited only to three lines of text in the dialog and then it's going to be ended with an ellipsis so let's do just that we're going to say max lines three and overflow will be text overflow ellipses which is nice and then we want to have two action buttons for this dialog so actions will be a list of widgets the first one will be a flat button responsible for canceling the dialog if the user changes his mind so inside unpressed we want to just pop the alert dialog so let's just say navigator dot pop this will pop the dialog of the stack and it will say text cancel in all caps awesome then another flat button let's just duplicate it below this one will have a block body for the arm pressed it will also pop the dialog but before that it's going to call note actor block add node actor event deleted and it's going to delete the given note which the user has long pressed on and it's going to say delete in all caps delete cool so that would be it for the show deletion dialogue now of course we need to actually show it on long press so let's scroll up and here inside on long press on the ink well we're going to say show deletion dialog passing context and note actor block right awesome now we can long press here it's going to show us the given note which we have selected and i really do not want to delete it because you know how long it has taken us in the previous part to build out a note manually so i'm not really going to manually test the deletion but it should work because the note actor block should really work so we're going to leave it up to chance once we can create notes from the ui in the next parts then we are going to test out also deleting the notes cool now let's create a card which will be displayed whenever there is some sort of an error held inside the node or one of its value objects so actually let's create such an error case by going to firestore again and i'm going to change the name or the yeah the name of the last to-do to be empty and this is invalid so once we come back to the app we're going to see the red placeholder container displayed and this is perfect because just like we have replaced the green placeholder container by the note card we are also going to replace this red one with a error note card so let's open up the widgets folder create a new file in there it's going to be called error note card widget dot dart and it's going to be a simple stateless widget error note card let's import material and let's again swap it with the placeholder container so let's say error note card and actually the error note card should also take in a note so let's create final notes notes create constructor for final fields and also import the note entity and let's make the note to be required awesome so now populate the note with the note from the list of all notes and here we go we can actually leave these commas to make the code shorter and let us implement the ui for the error note card right so just like in the case of the successful note card it's gonna be a card and we can immediately just populate the color to be the error color coming from the theme of the app so theme of context error color okay we still cannot see anything because there is no child for the card so let's change that asap the child will be again a column containing children and this is going to be a list containing a text which will say invalid note police contact support hopefully i got my commas right i never understand how to put commas in the english language but uh excuse me if i did something wrong but anyway you can immediately see that this text is displayed and the note is actually displayed as well or the note card actually the error note card which is awesome now we need to fix the styling of the text because you cannot see it properly firstly it's too small and secondly it's uh there is not enough contrast between the red color and the black color of the text so we're going to say style theme theme of context primary text theme body text 2 this will make it a little bit more bold i think and then we're going to copy with font size 18. so it's going to be a little bit more bold and also white therefore primary text theme is white and it's also going to be a little bit bigger the size will be 18. now i'm not sure if youtube still does this but a while back when you right clicked on a video you could see the details for nerds that's how it was called so we're also going to include the details for nerds inside the text which will uh describe the failure which occurred in technical terms we're going to display the error message so let's create another text details for nerds this should also be styled and the style will again come from a theme so theme of context and we're going to say primary text theme this will be just the body text 2 without any further modifications and then let's just copy this below and we are going to display the actual error details in here which will come from the note failure option and we're going to fold it in case there is no failure so it's none we're just going to return an empty string but this will actually never occur here because uh this error note card will again be displayed only if there is some sort of a failure present here but we still need to handle even the case when there is no failure and otherwise we are going to display the failure f converted to string awesome so as you can see here it says value failure string empty and the failed value is an empty string basically you cannot see it there but it signifies an empty string additionally let's offset this details for nerds from the invalid node text vertically by 2 pixels so size box height 2 just like that looks a bit better and then let's provide a padding to the column so let's say padding of 4 pixels only and now it's looking quite sharp right cool so this is also done this error note card widget we can come back to the firestore console and change it back to be successful data hey update come back to the app and everything is working as it should be which is nice so we have just handled the error case the failure case or the success case for individual notes but we also need to handle the case when there is some sort of a failure occurring because of insufficient permissions and so on in other words if we cannot get even just a single note from the database this load failure case will kick in currently we are displaying only a yellow container in the corner but we want to display something a bit more elaborate now in the previous part we have found out that the insufficient permissions exception is not necessarily working as expected and it's behaving in a very weird way again if you have some ideas about why that could be leave them in the comments preferably for the previous part because i'm just recording these parts in the road so i could not have read your previous comments and that's why in order to get into this load failure state coming out of the note watcher block what we need to do is to actually the simplest way is to come to the infrastructure layer nodes node repository implementation right and from here where we say watch all we are just going to short circuit the execution of this method and we are always going to return or yield actually the insufficient permissions inside the left side of either so just temporarily let's comment out the code which is inside this watch all of the node repository implementation and let's just yield this thing insufficient permissions failure and now we should just be able to have a restart i guess or something yup and now we can see that the state which was emitted from the block is this load failure so now we can build the ui for the load failure without any kind of an issue the load failure will be represented by yet another widget of course it will be the critical failure display widget so again as we have become used to we're going to create a new file under widgets critical failure display widget dot darts this will again be a simple stateless widget critical failure display let's import material and this will actually take in the note failure so that we can display the details note failure failure and let's populate the constructor for final fields and let's make this failure required awesome now we can come over to the notes overview body widget and swap this placeholder container for the critical failure display and pass in the failure which will be coming from state right dot node failure everything is fitting together like legos that's nice that's how it should be so we can now come back to the critical display failure widget and implement its ui to display some more details to the user so what should we build here well again we are going to return not a card this time but instead a column which will contain children which are going to be a text the emoji for screaming fearful face cannot be missing from any sort of a good app so we're going to put it in here and let's say style text style we're gonna make this huge so font size will be 100 and let's check out how it looks like amazing it's completely blurry but that doesn't matter to us right does it and by the way uh some of you have been asking me in the previous part when i have added emojis here how i do that well on windows at least it's the windows key and semicolon by default so windows key and semicolon on the mac i remembered the keyboard shortcut but now i do not so you'll have to find it out yourself on mac sorry about that and on linux you have a gnome extension which you can use by the way if you are running under the gnome ui or how it's called so this is the first text but it looks kind of off because it's uh stuck to the left and top corner so we want to center the column and then we also want to make the column as small as possible by setting its main axis size to be main axis size minimum so that it's also centered on the vertical axis right and then we just want to display a text below which will contain different texts for the different failures which can occur so the text will be coming from a mapped failure so let's say failure map or actually we can say maybe map in case that the or else runs this will be reserved for unexpected errors unexpected failures so we are just going to say unexpected error then the new line please contact support cool now you can see that it's looking really really weird this thing which we have created here we're going to fix it later on now we also want to handle insufficient permissions correctly in which case we're going to say insufficient permissions good nice so now we want to style this text well at first we wanna make sure that it's actually centered so we're gonna say text align center and then we're going to say style style font size will be 24 let's make it constant awesome and then this is completely over the top you don't need to do this you can actually skip this because we are not going to be sending any support emails uh actual support emails in this tutorial series but just so that it looks nice we can add a flight button and this will have a child containing a row which will display children and the first one will be an icon icons mail then let's also implement unpressed like that the second thing inside of the row will be a size box just to sort of push it apart so sized box provide horizontal padding so width of four pixels and then a text and the text will say i need help in all caps of course because this is really serious stuff awesome we can actually make the whole list constant like this cool and actually we can also make the main axis size of the row to be minimum and this will make sure that it's centered the children of it will be centered on the screen because we are centering the whole uh column or actually you know the cross axis alignment is center right is that correct by default i guess so but anyway when we set the main axis size of the row to be minimum so it's going to take up the minimum space possible given by its children so let's say min now it's going to be centered and i'm pressed we're not going to do again anything meaningful we're just going to print sending email okay let's check out the debug console and when we press it it says sending email which is good to see so it works and yeah with that we can or actually we have tested that everything works properly actually if we go back to the node repository and swap this insufficient permission failure to unexpect it restart we're going to see unexpected error please contact support the same goes for unable to update if we emit that again it's going to be unexpected error please contact support so that's cool now we can revert back to the actual code being run inside watch all of the repository implementation and now we're gonna see that a node is displayed nice so in this part we have built the node card widget for the successful notes error note card widget for whenever there is a failure occurring inside of the note inside one of its value objects and then also a critical failure display widget when there is some sort of a huge failure happening with the communication with firestore usually and just like that we have really implemented this notes overview page almost fully the last thing that remains for us to implement here on this page is the uncompleted switch which will allow us to see only the uncompleted notes and we will hide the completed notes so this is what we are going to build in the next part so if you do not want to miss that and also more tutorials like this be sure to subscribe to this channel also join notification squad by hitting the bell button to make sure you grow your flutter skills because here on resocoder i am determined to provide you with the best tutorials and resources so that you will become an in-demand flutter developer and if you are serious about becoming a great flutter developer who can build real apps for clients or at the job go to flutter.education by the way link is also in the video description to get the top curated flower news and resources aimed at improving your app development career over there you can also subscribe to my mailing list to get the best photo resources delivered weekly right into your inbox if this video helped you give it a like and also share it with other developers who are surely going to find it beneficial too leave a comment if you have anything to say and see you in the next [Music] video [Music] you

Channel: Reso Coder

Views: 3,853

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter, flutter tutorial, flutter firebase, flutter firestore, flutter firebase auth, flutter firestore tutorial, flutter firebase tutorial, flutter architecture, flutter architecture patterns, flutter domain driven design, flutter ddd, flutter database, flutter todo app, flutter todo app tutorial, flutter todo app firebase, flutter app tutorial, flutter app example, flutter clean architecture, flutter bloc

Id: WcagE5oOOpk

Length: 49min 43sec (2983 seconds)

Published: Sat Jul 18 2020