Flutter UI Design Tutorial for Beginners - 2023 - Explained step by step

hey guys welcome back to the channel it's been a long time since I made a design coding video on this channel in today's video we are going to try to recreate the design in flutter I will put a link to the design in the description below I have already gone ahead and created a startup project to save us some time so here we have our asset images and here the two pages that we are going to create here in the main.dot we have the main method that calls this class which Returns the material app inside the material app we called the team folder page which is this page again here we have a stateful widget with an empty scaffold this is why we have a blank page here now let's start with the implementation of this first page of the design so let's come here and start by adding a background color to the scaffold then for the body of the scaffold we will add a column that we will use to lay out the main sections of the page the first thing inside this column will be a container for this header section of the pitch let's give it a height of 170 and also use the decoration property of the container to set the background color now as a child for this container we will add a wall we will use this wall to organize those two groups of widgets the first one will be a column of two text widgets and the second one will be a row of two custom widgets that we will be creating the two text widgets are pretty straightforward so let's quickly create them inside the column as you can see the text widgets are not positioned correctly to fix that let's add some paddings to The Container then another issue is that the column by default takes the maximum variable space on its main axis to fix that let's set the main axis size property of the column to main axis size mean then finally we will set the alignment of the item inside the container to alignment bottom center now for those buttons we will use a combination of a container and an icon button to create them for that let's go down to this world that we created earlier and start by adding a container then as a child we will give it an icon button now let's use the decoration property of the container to give it a background color colors black width opacity 10 Also let's give it some rounded Corners using the border with use property let's make the icon bigger and also give it a white color Now to create the second button we just need to copy and paste this custom widget and replace the search icon with a notification icon now to add some space between the two buttons we could use the margin property of the container or use the size box widget I'll go with the size box widget this time since we are inside the row we will use the width property of the size box and set it to 10. Now to create some space between the two groups of widgets we will use the main axis alignment of the main row at the top and set it to main axis alignment space between before we move to the next section let's quickly fix this issue here with the alignment of the text widget they are aligned to the left so to fix that we will use the cross axis alignment property of the column and set it to cross axis alignment start I think we are done with the header of the bit now let's move to the storage info section for that let's go down here under the container and other world and inside this wall we will add a rich text widget followed by a sample text widget we could also use two text widgets instead of a witch text widget but this will then require us to use a row to place them the main advantage of the which text widget is that it allows you to have unique text styles for different blocks of text called text span let's add the first text pan with its own textile and now the second expand with a different textile and finally the sample text widget for the upgrade text as expected we now need to add some space between the two widgets for that we'll come here in the row and set the main axis alignment to space between the wall is too close to the header so let's use the size box widget and its height property to create some space between the header and the row and finally we need to add some paddings around the world since we only need paddings on the horizontal axis we will use agent set symmetric horizontal before we move to the second part of this section let's quickly add some white space using the size box widget let's paste it after the padding here now to create this visual we will consider it as a row of multiple column and each column will contain a container and a text widget so we will come here create the world and inside it at the First Column let's add the container give it a width a height and a color now let's create the text widget below the container the container is too close to the text widget so let's add some white space using the size box widget also they are aligned to the left so let's fix that using the cross access alignment property of the column and set it to cross access alignment start and again we need to add some horizontal padding now we are done with the First Column we could just copy and paste it many times to create the other one but to better organize the code let's extract it in a method let's call it build file size chart now let's add some parameters for the values that will be different in each column a string for the title a color for the color of the container and a double for the width of the container now we can come here add some values for those parameters and also duplicate this line many times we have this issue here because we are using a fixed width for the containers instead of a dynamic one which will be a percentage of the total screen so to fix that let's go to the top and create a variable called available screen width and use the media query of context size width to get the size of the screen and then minus 50 to remove the horizontal padding now we can come here and replace the fixed width by the available screen width multiplied by the width argument which will be a fraction of the total let's rename this to width percentage Now to create some space between the columns let's go to the row and add the size box between the methods since we are inside the wall we will use the width the size bar now the only thing that is left to do is to pass the correct values to the methods if you like this video so far a free way to support the channel is to give us a like And subscribe if you haven't done so yet before moving to the next section let's add this line here using the divider widget before creating this section I will assume that the rest of the page is callable so for that I will come here under the divider inside the column and add a list view widget since we are adding a list view inside the column we need to wrap it with the expanded Widget the first thing inside the list view will be a text widget for the recently updated text let's quickly add as usual a size box to create some white space and we need some horizontal padding and this time we will use the padding property of the list view to add it once and for all for the rest of the page now for those three items we'll use the same approach that we used earlier which is a row of multiple columns and inside each column we will have a container with an image inside and a which text below the content so inside the row here we will add a column and inside the column a container as a child for the container we will use the image asset to bring the image that we have in our image folder to avoid this error make sure that you have added your image asset in the pub spec.tml file the image is too big so let's give the container a height of 110 and also set some paddings all around the image let's use the decoration property of the container to add this light gray color in the background we'll also use the Border radius to add some wounded corners now let's add the which text widget we use the rich text widget because it's one block of text with multiple styles now a size box to add some space now for those two we could copy and paste but instead to better organize our code we will extract it in a method let's call it build file column and now let's add the parameters a stream for the image another string for the file name and one last one for the extension let's quickly replace them now that's done as we did earlier let's go back to the method add those values and duplicate the method to fix this issue we'll come here on the container and set the width to the available screen with multiply by 0.31 which is almost a third of the screen width and to create some space between the columns will come here and use the size box widget and set its width to the available screen width by 0.03 another thing that I assume here is that we will only have two items and they are not scoldable on the horizontal axis otherwise I would have put them in a list view with a scroll Direction access horizontal now let's finalize this section by putting the correct values in the method we have a divider here let's add it now for this section we'll use a row for those two text widgets so we'll come here under the divider and add the wall inside this wall we will quickly add the two text widgets to add the space between the text widget we will use the main axis alignment of the world and set it to space between now for this list of project folders We will again use a container and inside this container We'll add a main Row for this icon button in this group and then for this group we will again use another row to lay out this icon in this text widget but before we do that let's come here and add some white space using the size box widget now let's add the container and the main role as a child again the first thing inside this row will be another row to group the icon and the folder name now let's add the icon then the text widget for the folder name now for the icon at the right we'll go below this wall inside the main row and add an icon button to push it to the right let's go to the main row and set the main axis alignment to space between now let's finalize the container we will first give it an horizontal padding then we'll use the question property pass it a box decoration we'll use the color property of the Box decoration to give it the background color then the Border radius to give it some wounded corners and one last thing to finish it is to give it a height of 65. now depending on the up features it could make more sense to extract this container in a widget but since we are just recreating the design I'll extract it in a method let's call it build project row as always let's create the parameters and this time we only have one string the folder name since we are using a variable now we need to remove the const keyword now let's go up in the method and place the correct values and duplicate the method multiple time to have the different items in the list as you can see everything looks good except that we are missing some space between the project folders and to fix that we could come here and use the size box between the methods but since we have a container here we will use the merging property of the container to create some space around it and more specifically only at the bottom of each container now let's move to the creation of this custom navigation bar which is a combination of a bottom navigation bar and a floating action button for that we will come here under the column that we created for the body of the scaffold and use the bottom navigation bar property of the scaffold we'll pass it a button navigation bar widget which takes a list of button navigation bar items let's create them even though we don't need the labels in the design we have to add them because as you can see here they should not be near but fortunately we can come here and set the show selected levels and show unselected levels to first to hide them to be able to switch between those two buttons we need to provide a callback function to the untapped property of the bottom navigation bar this callback will receive the index of the selected Button as parameter but before we can use it inside the Callback we need to First create a state variable that will track the currently selected button let's call it selected index and we will give it a value of 0 which represent the index of the first button now we will come here when the button is tapped we will set State and set the selected index to selected index to avoid confusions let's rename this parameter to index now one last thing to make it work is to set the current index property of the bottom level application bar to our state variable selected index as you can see we can switch between the buttons now to add this button here we need to First add a floating action button to the scaffold let's do that right now and as a child we will pass it an icon now to place it in the middle of the bottom navigation bar we need to use the floating action button location property of the scaffold and set it to Floating Action button location Center docked now before we finish with this section we need to add this white shadow Behind The Floating Action button for that we'll come here and since the floating action button property takes any widget we can wrap this Floating Action button with a container and then we will use this container to add a shadow Behind The Floating Action button to do that we will use the decoration property of the container which takes a box decoration and for the shape we will use a box shape Circle then we will also use the Box Shadow property which takes a list of box Shadows we will set the color to white a spread radius of 7 and a blur radius of one I think we are done with this page everything is working well don't hesitate to add in the comment below if you see a mistake or something that you will do differently now to complete the design we will need to create this second page but I will leave it for another video I will put the link of that video in the description below when it will be published if you made it so far please give us a like subscribe and I'll see you in the next one

Channel: MJSD Coding

Views: 33,844

Keywords: flutter tutorial, flutter ui design, flutter ui, flutter app development, flutter tutorial for beginners, flutter ui design tutorial, flutter speed code, ui design in flutter, flutter ui design tutorial in hindi for beginners

Id: Qg9N_FOhLzo

Length: 16min 47sec (1007 seconds)

Published: Tue Jan 24 2023