the best way to learn programming is to start building a simple project we also want to do this if you want to learn the basics of flutter by doing a project watch this video Until the End to learn the basics of flutter in the UI section we are going to implement this project simply by doing this project I assure you that your level will improve and you will be prepared for more important topics so let's do it because there are many tutorials on the internet for installing the flutter editor and emulator I haven't recorded the tutorial for these things and you can do it with a simple search to get started click on the terminal then first type the command flutter create and then type the name of the project in front of it and finally press enter to create our flutter project now open the project the structure of the folder is like this but for now we only work with the lib folder the main file of the generated project is the entry point of the flutter application we know that any programming language has the main entry point this means that this is where our program first gets programmatically executed so in Dart we also have the switch called main function what makes the flutter application take the scene is the run app function called by passing a widget as a parameter which will be the root widget of the application now we need to run the application to do this first select your emulator then press the F5 button after running the application you will see a screen like this this is the default application of flutter which is written in the my home page class now it's time to start coding first we create a folder called Pages where we create different pages of the application if we look at the design we want to implement we will see that we have only one page so we create a file called Home in the pages folder at the beginning of each page we must import the material package flutter has widgets specific to a particular platform Android or iOS Android specific widgets are designed in accordance with material design guideline by Android OS and they are called as material widgets and iOS specific widgets are designed in accordance with human interface guidelines by Apple and they are called as Cupertino widgets now to start we need to create a class called home screen flutter has two core types of widgets stateless and stateful these two widgets are the building blocks of every widget that flutter provides in simple words stateless widgets cannot change their state during the runtime of the app which means the widgets cannot be redrawn while the app is in action but stateful widgets have a mutable State they are mutable and can be drawn multiple times within its lifetime they are the widgets which can change their state multiple times and can be redrawn onto the screen any number of times while the app is in action for now we need to create a stateless widget for this we can use the sdl shortcut by typing sdl the editor will suggest the stateless widget and by clicking on it the widget will be created and we can immediately type the name of the class in order to set the first page of the application as the home page it is enough to set the value of the home property equal to the home page class in the main.dart file and the rest of the codes are not necessary at the moment and can be deleted to solve the problem of these lines we must put the keyword cons before material the cons keyword is used when the value of the variable is known at compile time and never changes in other words the compiler knows in advance what value is to be stored in that variable in the next videos we will talk about the cons keyword in detail that's all you need to know for now now if we restart the app we will see that the page is empty because we did not write a special code to display something in the home page class also in order to remove this red debug Banner we need to set the debug show checked mode Banner property to false in the material our work is almost finished in the main.dart file now it's time to start the main work in the home file but before starting let me explain the build method very briefly the build method describes the part of the user interface represented by this Widget the return type of this method is a widget so we can return any widget but here we need to return a scaffold but what is scaffold scaffold is a class in flutter which provides many Widgets or we can say apis like app bar drawer Floating Action button bottom navigation bar snack bar and so on in other words scaffold will expand or occupy the whole device screen scaffold will provide a framework to implement the basic material design layout of the application if we look again at the design we will see that above we have an app bar so the first thing we need to do is add an app bar to the scaffold to do this we need to pass an app bar widget to the app bar property in the scaffold like this now we have to put the breakfast text in the center of the app bar but before that let's add the font not used in the design to the project for this first we create a folder called fonts outside the lib folder then we add the fonts inside it and finally we have to define the fonts in the pubspec.yaml file for this we scroll down and uncomment the font section and then we first write the name of the font family and at the end we enter the fonts in the weight of the fonts like this now in order for the project to recognize the fonts we open the terminal and enter the flutter pubgit command and if there is no problem and we have added the fonts correctly we will see this message in order to have this font applied to all the texts in the app we must Define it in the main.dart in the theme of the application so we open the main.dart phylum in the materialab class and in the theme property we Define font of the application and theme data like this now let's go back to the home file and complete the app bar so in order to put the text in the app bar we use the title property in the app bar and pass the text widget to it the reason for this error is that the text widget has a required parameter of the type string and here we have to set its value equal to breakfast now I restart the app and we see the text breakfast in the app bar but the text is not in the center to bring the text to the center of the app bar we can use the center title property and set its value to true we can use the style property to change the style of the text and in text style we can change the font size and its color according to the design we should make its color black and make its size smaller as well as make its font weight bold now we need to change the background color of the app bar to White for this we just need to use the background color property and set its value to White if we look at the design the app bar does not have a shadow in order to remove the shadow of the app bar we must set the elevation value to zero well let's go back to the design apart from that we have text in the app bar we also have two buttons they are not exactly buttons but they work as buttons inside the buttons we have icons that we have to use as SVG to use SVG and flutter we must use the flutter SVG package but how to use SVG package in flutter it is very simple from here we copy the package name together with the version and then place it in pubspect.yaml in the dependencies section and finally enter flutter pubgit in the terminal in order to implement the left button we must use the leading property in the app bar this button consists of two parts a gray box and an icon we can do this with the container widget and for container style for example color and radius and Etc we should use decoration I set the color of the container equal to Black so that it is clear also the corners of the container have a radius and we should use the Border radius for it now we have to reduce the size of the container if we set a value for the width and height of the container we will see that it will not change neither bigger nor smaller so what should we do exceptionally we have to use the margin to set the size and the leading so I use the margin in the container and leave a distance of 10 on all sides and the container becomes small now it's time to implement the icon in the center of the container as I said before we have to use SVG for this we have to Define svgs like fonts in the project so first we create a folder called assets and inside it we create another folder called icons and put files in it now open the pupsfic.yaml and scroll down and uncomment the assets section and Define the path of the icons folder and finally open the terminal and enter flutter pubg now we display the icon using the child property in the container and the SVG picture widget from the flutter SVG package to fix this error we must import the flutter SVG package like this and finally we must pass the path of the icon to the SVG picture the reason why the icon is not visible is that both the color of the icon and the color of the container are black and we have to change the color of the container to the color that is in the design because the color in the design is not a const color it should be used in this way we must put the xeroxff code before the main color code now we have to reduce the size of the icon for this we can use the height and width in the SVG picture widget but wait why didn't it change to be honest I don't know either but there is a magic solution to solve this problem if we set the value of the alignment property in the container equal to Center the problem will be solved we can easily use this code for the right button in order to show this code on the right side of the app bar we need to use the actions property which we can give a list of widgets to it we can see that it is not displayed correctly and the width of the button is small to correct this we must Define a width for the container in action now we can see that it is exactly like the button on the left and finally we need change the path of the icon to this the implementation of the app bar is almost finished the only thing left is that now these buttons that we made with the container are not clickable to make them clickable we just need to wrap the containers inside the gesture detector widget now in the on tap property we can call any function we want in order to have a clean class we can extract this entire part of the app bar into a method and just call it to do this we click on the yellow light bulb then select the extract method option enter the name of the method and that's it now we have clean code the next step is to implement the search text field we have to do this in the body property of the scaffold if we look at the design we can see that the elements are under each other so we must use a widget called column in the body to implement the text field we must use the text field widget now if we click on the text field we can see that we can type but this is a very basic text field and we need to style it to change the style of the text field we must use the decoration property and pass an input decoration widget to it now inside the input decorate duration the first thing we have to do is to set the filled property value to true and also set the filled color to white now the text field is not very clear according to the design it should be at a distance from the top and around and also have a shadow to make these changes we wrap the text field inside a container and then use Edge in sets dot only to make margins from the top left and right to create shadow in the container we must use the decoration property and then we use the Box Shadow Inside the Box decoration and set the value of the Box Shadow properties exactly like the shadow in the design we can use with opacity method to set the transparent background color here 0.11 is an opacity value which ranges from 0 minus one the text looks much better now but there are a few things we need to do the first thing we need to do is to remove the border of the text field and also give the text field a border radius for this we use outline input Border in the Border property of input decoration and first set the Border radius then set the Border Side value To None now we need to reduce the height of the text field a little for this we use content padding and decoration which takes an edge and sets geometry widget now we have to implement the search icon filter Etc in the text field first we place the icons in the icons folder and execute the flutter pubgit command again so that the icons are defined in the project to display the search icon on the left side of the text field we must use a property called prefix icon which is a widget type so we can use SVG picture and specify the path of the icon but the icon is big and we have to make it smaller for this way we can wrap the SVG picture inside the padding widget then we set the amount of padding 12 and the icon becomes small to display the icon on the right side of the text field we must use suffix icon and then do exactly what we did for the search icon and use SVG picture and use padding to reduce the size of the icon also there is a thin vertical line next to the filter icon so that we can display it next to the filter icon we must use the row widget now it is row widget this widget arranges its children in a horizontal Direction on the screen in other words it will expect child widgets in a horizontal array to change the UI we need to play with cross axis alignment and Main axis alignment in the row widget main axis alignment will be in the horizontal Direction and cross axis alignment in the vertical Direction therefore after using row we must also set the value of the main axis alignment property equal to n so that it is displayed on the right side of the text field so I wrap the icon inside the row widget and the explanation of the row widget I said that in order for the right side to be displayed the value of the main axis alignment property and row should be equal to end now you can see that it is displayed on the right side now I create a vertical line using the vertical divider widget then I set the color of the line equal to the color in the design and I also set its thickness to 0.1 but nothing is displayed here is one point that you must pay attention to when we want to use divider in a row widget we must wrap the row inside intrinsic height I think the color of the design is too pale that's why I make it black and now it's easy to see and finally we need to reduce the height of the line for this we can use two properties indent and indent the work of indent is to create space from the top and the work of indent is to create space from the bottom the last thing we have to do is to show the search pancake text for this we have to use hint text property in the text field and we have to set its value as a string but nothing is displayed again what do you think is the problem let me tell you there is a problem with the suffix icon because we did not set a width for the row for example if I wrap the suffix icon inside a container and set a color for it we will see that it occupies the entire width of the text field and because of this hint text is not displayed so so I set the width of the container to 100 now we see that the hint text is displayed and in order to change the style of the hint text we use the hint text style and change its style according to the design so the implementation of the search text field is finished now the only thing we have to do is to set the body color to white for this we use the background color in the scaffold and set the body color to white in order to increase the readability of the code we extract the text field again like the app bar using the extract method now we have to implement the category section it consists of two parts the first part is category text and the second part is a list view that contains information about categories because the list view is under the category text we can use column for implementation let me first explain what column is column is a widget that displays its children in a vertical array if you want to Define several widgets rendered in a vertical column according to their order the column widget is suitable for that purpose we can also control how a column widget aligns its children using the property main axis alignment and cross axis alignment the column's cross axis will run horizontally and the main axis will run vertically so for first we create a column then we need to display the category text which we can display using text and we can change the style of the text using style we already reviewed the text widget together now we don't need to deal with it we have two problems here first we need to create a distance from the top for this we can use the size box and set the height which causes a vertical distance to be created between the two widgets namely the search field and the category text now the text is in the center which should be displayed on the left side for this we have to set the cross axis alignment property of the column that is in the body to start this column which is in the body does not need to be there and should be changed I have put it to explain a point that I will say later so wait now we need to create space from the left side for this we wrap the text inside the padding and then set the padding from the left side the next step is to implement this horizontal list view the first thing we have to do is create a container and set the height we want the list to have I also set a color to make it more specific which we will delete at the end we also need to create a vertical distance from the category text which we can use size box again because we use column here too in order to display the text on the left again we need to set the value of cross axis alignment equal to start and in order to have a list of items in flutter we can use the list view Builder widget so I put the list view Builder widget in the child container the reason for this error is that list view Builder has a required parameter called item Builder which we use to display items and in its return we must return a widget also item Builder has an argument named index which is actually the item number if we look at the design we can see that the information of the items is not the same the icon the name and even the background color of the Box are different so how do you think we can implement this should we check with if for example if the item number is zero show the solid text or if it is one show the cake text no no this is a wrong way we should use model instead of this way to create category model first we need create a folder called models then we create a file called category model inside this folder here the first thing we have to do is create a class so I define a class called category model now we need to define the parameters and then create the class Constructor if we look at the design we can distinguish three parameters that are different from each other in the items category name icon and background color of the Box therefore we need to Define three parameters the variable type of Icon and name is string the reason why icon is of string type is that the icons are SVG and we need its path and finally we Define box color which is of color type now we create the Constructor of the class to fix these errors we only need to put the required keyword before each parameter in the Constructor now how should we use this model as you know we have a list of items whose information is displayed through this model so we need a list of this model the first thing we need to do is create a method called get categories that returns a list of categories now inside this method first we Define a list named categories which will actually add the categories to this list and finally we will return this list according to the design that we have four categories we enter their information in the model and then add them to the categories and finally we need to return this list to use this method we must first Define a list of this category model on the home page then get the list of categories from this method to get the list first we create a method called get categories in order to be able to access the function we created in the category model class we have two ways neither to create an instance of the category model class or to make the method static so that without to instantiate the class we can access it my preference is to use the second method therefore I add the word static before the method then using categories model docket categories we get the models we made and put them in the list we Define now to use this list the first thing we have to do is to call this function somewhere to fill the list we can convert the class to stateful so that we can call it in the init State method which is not necessary at the moment and we can call it at the beginning of the build method so that the list is filled first and then the widgets are displayed now we have to use this list in the list view Builder that we made list viewbuilder has a property called item count in which we specify the number of items by using categories.length we can make the number of items equal to the number of categories and Define categories for list view Builder now we have to make the items according to the design first we use decoration to determine the color of the boxes to access the colors that we Define in the construction of the models we we can simply specify the index of the item in the categories then select the Box color field like this now to display I set height and width but it is not displayed correctly the reason is that we did not specify the scroll Direction and now the list Scrolls vertically and we have to convert it to horizontal to do this we set the value of the scroll Direction property using axis equal to horizontal now we don't need to define the height for the item because it is not applied and the height of the list view is applied to the items so I delete it now we need to increase the width of the items then we need to create a distance between the items the best thing we can do is to convert the list view Builder to listview separated the reason for the error is that the separator Builder property must have a value and we must set a widget for it we can use the size box widget and set the width and create space between the items in order to make the implementation closer to the design I reduce the opacity of the boxes and also reduce the height of the list View and finally add space from the left and right to the list View using the padding property then we set the radius for the boxes to implement the inside the boxes we can use column in child because the category icon and title or located below each other now first we need to create a white circle for this we can use container and in its decoration we set the value of shape property equal to Circle in order for the widgets inside the column to be placed in the center it is enough to make the main axis alignment equal to the center now we have to display the icons in the center of the white circle for this we use SVG picture and pass the path of the icons that we defined in the models we have to use padding to reduce the size of the icons because for some reason that I don't know setting width and height does not reduce the size and has no effect now finally we have to show the name of the category which we do using the text widget to create a space between the text and the icon we can change the main axis alignment value from Center to space evenly and finally for the readability of the code we extract the categories section into a method the categories section was done now we have to implement the recommendation for diet section this section is also simple and we have to do exactly what we did for the categories section first we need to create the model class of the items then Define the function in which we create the models I did it in order not to make the video long and more worry here we have defined a Boolean field called view is selected which will change the color of the view text and also the display of the view button box with its help now like the categories first we Define a list of diet models then we create a function and get the list from the get diets function that we created in the diet model class here we can do something else instead of creating a function to get the information of each section we just create a function called get initial info and we get the lists inside this and then we just call this function in the build method let's go to implement the design first using the size box widget we create space from the top the implementation of this section is exactly like the implementation of the categories section first we create a column then we put the text recommendation for diet using the text Widget the style of this text is the same as the category text so I just copy its style and paste it here and I also set its padding from the left side now we use listview Builder to display the list again first we create a space between the text and the list View using size box then we Define a container and set its height to 240. also we set the cross axis alignment to start so that the text is not displayed in the center now we put the list view in the child of container because we want to have a distance between the items we use list view dot separated then we set the length of the diets list in the item count property for the space between the items we set the size box widget with a horizontal size of 25 then we return a container in the item Builder now first we set the width of the container to 210 then we specify the color box that we defined in the model in decoration and finally we also set the radius for the boxes the reason why the list is not displayed is that we need to set the scroll direction to horizontal so we do this we also reduce the opacity of the color boxes and set the padding from the left and right sides for the list view to implement Inside the Box the first thing we have to do is to define a column in the child of container then first we display the icon using SVG picture now we have to display the name of diet which we do using the text widget and set its value equal to the value we put in the model then we set the text style to display the level duration and calorie text we can easily use a text widget and display them together by plus to implement the view button we first Define a container with a height of 45 and a width of 130. if we pay attention to the design the color box is in the form of a gradient to display the gradient and decoration we can use the gradient property and depending on the type of gradient we can use the widget in the design the gradient type is linear gradient so we use linear gradient and then in the color property we Define the list of colors to create space between the widgets we set the main axis alignment equal to space evenly the space between the name of the diode and the lower text is short so that we can reduce the space we just need to put those two in one column now we set the radius for the button then we put the view text in the child and change its style to the design style finally what we need to do is to check that if the view is selected property value is true the color of the view text is white and the color of the button has a gradient color and if it is not true do not show the gradient and the color of the view text according to the design is purple for this we can use the question operator which does the work of it therefore first we check if it is equal to true and then we put a question mark and Define the correct condition which can be colors and if it is not true we put colon and set the colors to transparent we do the same thing for the color view text how to work with the question operators like this the implementation of the recommendation for diet section has also been completed to make the code readable we extract this section again into a method now we need to implement the popular section this section is exactly like the previous sections first we need to define a model class so that the video is not long I did this again here we have a Boolean called as box selected which we want to use to control the display of the Box Shadow now we go back to the home page and first we Define a list of popular models and then we get the list and the get initial info function from the get popular diets function now we create space from Top using size box then we Define a column and first display the popular text and exactly set the category text style for it and also set the padding from the left side the reason for displaying the overflowed error is that the total height of the widgets placed on the page is greater than the height of the entire page and it must be scroll in order to be able to scroll the body we must use list view instead of column now in order for the text to be displayed on the left side we set the cross axis alignment to start also taking into account that we must have a distance from the bottom of the page we use a size box again after the column now let's go and implement the list view for this we first create a space from the popular text then we use the list view dots separated if we want to have a distance between the items here first we set the item count equal to the popular diet's length then in the separated Builder we place a size box with a height of 25 in the item Builder we return a container with a height of 115 but the list is not displayed and we have an error to fix this error we must set the value of the shrink wrap property to true if you do not set the shrink wrap property your list view will be as big as its parent if you set it to true the list will wrap its content and be as big as it children allows it to be now we set the padding from the right and the left for the list then we go to the decoration of the container first we set the color of the box to White then we set the radius and finally we set the shadow of the container according to the design to implement inside the box since the widgets are in one line we must use row so we set row in the child container then we display the icon using SVG picture I feel that the height of the container is too high so I reduce it to 100. now we have to show the name level and Etc if we pay attention to the design we can see that they are in a column below each other so we have to use column first we display the name using the text widget and then we set its style and finally we display the level duration and calorie text like this in order to create space between widgets in a row we must set the main axis alignment equal to space evenly also by setting within height we make the icon size a little bigger in order for the text to be displayed in the center we must set the main axis alignment in the column equal to Center and also to display it exactly below each other we set the cross axis alignment equal to start and finally we need to display the button icon which we need to use SVG picture and to be clickable we just need to wrap it inside the gesture detector also we have to check that if box is selected is equal to true the color of the box is white and the box has a shadow otherwise the box is transparent we can do this with the question mark operator to fix these blue warnings we just need to add the keyword cons for this we we right click on one of the lines and select the add cons modifiers everywhere in file congratulations you have successfully completed this tutorial if you need help let us know in the comments and make sure hit the Subscribe button to get the next video [Music]