Flutter UI Tutorial for Beginners - Chat App UI - 2023 - With Explanation

hey guys welcome back to our floater UI design tutorial Series today we're going to continue improving our flutter UI building skills by recreating this chat up design that I've found on dribble by the end of this video among other things you'll have a better understanding of how to use the stack widget in combination with the position widget so without any further Ado let's start coding as always I've already gone ahead and created the startup project to save us some time so here we have our asset images that we will be using for the avatars then in the main.dart we have the main method that runs my app my app is a stateless widget that returns a material app the home property of the material app is set to my home page now my home page is the class where we are going to build our UI it's a stateful widget and for now it only returns an empty scaffold now let's start with this header section but before we do let's add the background color to the scaffold and also for the body We'll add a column for now I will explain why we'll need to change it later now the first thing in this header will be a row of two icon buttons so let's come here and other row and inside this row we will add the two icon buttons let's quickly add them they are not positioned correctly let's fix that by wrapping the row with the padding widget and we will only need to add padding at the top left and right Now to create some space between the two icon buttons we will set the main axis alignment of the wall to space between now for this section we will assume that it is callable that means instead of a row we will use a list view so we will come here after the padding and add the list view as expected since we are adding a list view inside the column we have this error here and to fix it we could come here and wipe the list view with an expanded widget but since in this case we will be scrolling on the horizontal axis we just need to wrap it with the size box widget we'll give it a height of 50. now DIY is gone let's continue to add the first text button inside the list View we will also use the size box widget to create some space before the next button now because we set the size box height to 50 to see the button that we just created we need to set the scroll direction of the list view to axis horizontal and as expected the button is showing now now to add these other buttons we just need to come here copy this block of code and paste it many times now we just need to change the text and the color of the buttons to Gray delizio seems to be okay the only thing missing is some paddings to the left let's add it using the padding property of the list View that's pretty much it for the header section now let's continue building the rest of the UI and one thing that we need to consider here is that we have widgets on top of other widgets that means we will have to use the stack widget so instead of using a column for the body of the scaffold we will use a stack widget more precisely we will wrap the existing column with a stack widget now this column here will only be used for the header section and to create this favorite contact Section we'll come down here under the column and add a position widget and as a child we will give it a container let's give it the height of 220 and a color so that we can see it and since we are inside of a stack our new container covers the column that we created for the header section and this is where the position with jet comes in we can now use its properties to position our container exactly where we want it on the screen so we will come here set the top to 190 and the left and right to zero so that it expands to the entire width of the screen now for the wounded Corners we will use the decoration property of the container it takes a box decoration now we have this error because we cannot set both the decoration and color property of the container at the same time in other words if we are using the decoration property we must set the color inside of it now let's continue to add the rounded Corners we will use the body reduce property and set it to body radius only top left radio circular 40. and the same thing for the top right now to lay out those widgets inside the container we will use a column so we'll come here and set the column as a child for the container then for this first wall since it has a similar layout to that one in the header to save us some time we will come here copy this wall and paste it there now we simply need to change this search icon here and also we place this icon button by a text widget let's give it a right color and finally we will use the padding property of the container to create some space between the row and the edge of the container now for this list of contacts we will use a list view with the scroll Direction horizontal so we will come here under this row and add the list View and as we did earlier to avoid this error we will wrap it in a size box we'll give it a height of 90 and also set the scroll direction of the list view to axis horizontal each item in the list view will be a column of a circle Avatar with an image in the background and a text widget let's start by adding the column then the circle Avatar will give it a reduce of 29 and for the background image we will use the image that are set and pass in the path of the image in our asset folder since the background image takes an image provider we need to add that image at the end don't forget to add your asset path in the pub spec.tml file now to add this white border around the circle Avatar there are many approaches that we could use but a simple one that I've found is to wrap this circle Avatar with another Circle Avatar then set the radius to something higher like 32 and the background color to white and finally let's add some space using the size box widget then the text widget for the name of the contact we'll give it a white color and set the font size to 16. Now to create the other items in the list we will come here extract this column in a method and duplicate the method many times but before we do that one thing you can notice is that this contact Avatar is used at different place in the UI down there and also in the drawer so before we extract the column in a method let's first extract this user Avatar in a widget let's add the property for the file name add it in the Constructor of the widget and in the build method let's go back to the widget up here and set the file name that we just created now that's done let's extract the column in the method we'll call it build contact Avatar let's add the parameters one for the name of the contact and the other one for the file name of the image now we will go back to the method here at the correct values and duplicate it multiple times to fix this issue with the spacing we just need to come here in the method wrap the column with the padding and set it to Edge and set only write 20. to finish let's come here and set those methods with the correct names and images now let's move to this section and as we did earlier we will again use the positions widget to place this container on top of the green one so we'll come here under the first position widget but still inside the stack and add a new position widget we'll pass it a container as a child and for the color we will directly use the decoration property because we know we will need it later to create the rounded Corners since the container is inside the position we get and doesn't have a specific height it covers the entire screen and to fix that we will again use the properties of the position widget as we did earlier now to see the container we could come here and give it a high but as you can see it's not that simple since the container has to fill the rest of the screen that means we will need to do some calculations involving the media query to get the height dynamically fortunately we don't need to do all that we can just use the button property of the position widget and set it to zero that means the container will be stretched from the top at 365 to the bottom at zero now to finish with this container we can come here copy the code for the one the corners of the green container and paste it there here inside the container we have a list view of custom widgets so let's come here and add the list view as a child of the container and since this list view doesn't have a column as ancestor in the widget tree we don't have any award this time now for this custom widget we will use a manual and another wall inside of it the inner row will be used to lay out the user Avatar here and this column of two text widgets then at the end in the main row we will use another column to layout the time and the notification alert so let's start by creating the first row then the second row inside of it for this Avatar we will use the user Avatar widget that we created earlier now the column for the two text widgets to save time we will just copy and paste the text widgets let's change the color of the text widgets and also use the cross axis alignment of the container to make them aligned to the left let's add some space between the text using the size box widget we will give it a height of 5. and also some space between the user Avatar and the column again using the size box widget but this time since we are inside the wall we will set its width to 15. now for the paddings we'll do it in two steps we'll first add a padding in the list view only to the left and then another padding in the container on the vertical axis let's finish this wall by adding those widgets at the end for that we'll come here inside the main row and add a column inside this column we'll add a text widget for the time then a circle avatar for the notification alert we'll give it a radius of 7. a background color and as a child another text widget let's add some space between the time and the notification alert using the size box widget now to push our new column to the right let's go to the main row and set its main axis alignment to main axis alignment space between the column is too close to the edge so let's wrap it in a padding engine set only right 25 and top 5. now one last thing to finish with this item is to add this divider at the bottom for that we'll come here rub the main row in a column then come down here and add the divider under it to create this indentation we can use the indent property of the divider and set it to 70. now to finish with this section we just need to duplicate this item many times and to do that we will come here and extract this column in a method we'll call it build conversation row let's create the parameters for a new method a string for the name one for the message another one for the file name and finally an end for the message count let's quickly replace them in the method body and now we can come here in the method and pass in the arguments then duplicate the method for the notification alerts we'll show them only if the message count is greater than zero for that we'll come here above the circle Avatar in the column and add this condition that means it will show this circle Avatar only if the message count is greater than zero I think we're done with this section now let's continue to create this Floating Action button for that we'll come here under the stack but still inside the scaffold and add a floating action button we'll give it an icon as a child then a background color The Floating Action button is too small so we'll use the size box widget and set its width and height to 65. and finally to put it a little lower on the screen we'll use the floating action button location and set it to Floating Action button location and duct I think we are done with this section now let's move to the creation of this drawer the idea is when the user Taps on this button it should open this drawer on the left side of the screen so to start we'll come here and use the joy property of the scaffold to add a jar to our design let's give it a width of 275 and a slightly transparent background color now to open our drawer we will need to come here and create a global key of type scaffold State then initialize it next we will come here and set the scaffold key to our Global key then we'll go to the unpressed Callback of the icon button and call the global Key current state Open Drawer method now if we click here it will open our joy on the left now we can open the jar let's come here and as a child we will add a column that we will use to lay out the items in the jar for the first item we'll use a row and add an icon and a text widget inside of it so let's come here add the wall the icon a size box for some space and then the text widget now we need to add some paddings around the column we'll use the foam left top right bottom Constructor of the edge and set class let's create the second item in the list so again we'll use a row and inside of it we will add our user Avatar widget that we created earlier it takes a file name then a text widget for the username as always we will use the size box to create some space between them for this group of options here since they are very similar to this one we can come here copy this wall and paste it there again we will use the size box to create some space now instead of copying and pasting this row many times we'll convert it to a new widget we'll call it your item we need two properties for this new widget a string for the title and an icon data for the icon let's add them to the Constructor and also we place them in the build method let's add the correct values for the first item then duplicate it many times to create the other items in the list they are too close to one another to fix that we'll come here in the build method and wipe the row in a padding we'll add the padding only at the bottom let's add this divider and set its color to Green we'll also give it a height of 35. for this invite frame option we will again use our joy item widget now for this logout option we could come here and add another Joy item widget in the column the issue with this approach is that there isn't an easy way to push it down to the bottom so a way to solve this is to come here wrap this column with another column then we can come here move this item inside the column that we just created so that we have only two items inside this column and then we can use the main axis alignment property of the column and set it to space between to create this empty space between this column and the log out item below it to make the drawer items clickable we'll come here and wrap the padding in an equal now to make those Corners wounded will come here use the ship property of the drawer and set it to a rounded rectangle border we'll set its border radius to better reduce horizontal right radio circular 40. now we need to add those Shadows behind our drawer but before that we must remove this transparent layer that covers our background for that we'll go all the way up here in the material app and use this theme property which takes a theme data then the drawer theme which takes a drawer theme data set the screen color to Colors transparent now the screen color is gone to add the Shadows behind the drawer we'll come here and wrap this padding in a container then we will use the decoration property of the container to finally add the black color to the drawer as you can see this color has some transparency in it so that we can see the items in the background since our container now covers the jar we need to also add the rounded Corners to the container for that we can just copy this border reduce property here and paste it there now we can use the Box Shadow property of the decoration box to set the Shadows I think we have successfully completed this design at least the way I understood it don't forget to leave your suggestions and questions in the comment below and since you made it so far please give us a like subscribe and I'll see you in the next one

Channel: MJSD Coding

Views: 21,846

Keywords: flutter chat app, flutter tutorial, flutter ui, flutter chat ui tutorial, flutter chat ui, flutter ui design, chat ui tutorial, building a chat app in flutter, ui design, flutter tutorial for beginners 2022

Id: dPVrpCjDAFo

Length: 20min 13sec (1213 seconds)

Published: Thu Mar 02 2023