Flutter: Instagram clone Design | UI/UX | Search Screen | Part 2 - Proglabs

hello guys welcome to my channel it's junaid here this video is the second part of the series about instagram design clone and flutter in the second part i am going to show you how you can clone the search screen of instagram app in flutter so by continuing from the previous work done from for home screen but first let me show you guys that what we are going to do so this is the kind of screen which we are going to design exactly which we see in instagram and i hope that you guys have an idea that what is the concept of row and what is the concept of column um if you need to align the widgets in horizontal alignment then you can use row and if you need to align the widgets in vertical order then you can use column but here you can see that we need to use row we need to use column plus row for this and in the design part i will show you the dummy data basically [Music] when we get the data from the api developer then we can uh tell our ap developer that we need such kind of data in which we get that this node contains uh video or not because if if you are an instagram user then you you know that the videos uh in instagram are showing in the bigger uh box and the pictures are showing in instagram in smaller boxes so first i'll show you that how we can create a dummy data in our app sorry and after that we will use that data to populate our widgets okay so let me first create the model for the dummy data okay i will create a directory dummy data okay and i will create a dart file here suggested posts model okay here we need to create create a class suggested post model like this and we will create a variable boolean type variable contains video true or false okay this variable will let us know that we need to use this kind of widget this kind of column plus row widget or we need to use only row okay the other one is string content link one string content link two and string content link three like this okay now we need to create a constructor for this uh for creating a constructor you can use the short key which is alt plus insert when you click when you press that short key then you can see these options just click on constructor and select all of all four of these and press enter it will create the constructor for you automatically okay after that we need to go to our search screen because in the previous video i created four screens for you home screen main screen profile and search screen we completed the work on home screen like this in the previous video created the home screen like this now we need to create a search screen like this okay so for this we need to if you remember that we created text utils files we need to use import that we need to create an object for this file as well this class sorry make it final and we need to create a list of the model we suggested model suggested post list and we will make it an empty list and we will put the data in our init statement method because this method is called before the build method that's why add data and we will create a function here alt enter create method like this now we need to put the data in this list okay so suggested post list dot add and here we need to add a data of type suggested post model contains video for now for the first we make it false there we need to put the content link for the first the second and the third i am using a dummy links for these and i will mention these links in the description of this video as well okay so you don't have to worry about it that or you can use the links from google okay and for the third one like this now we can just copy this line this basically let me copy this okay just paste it four times for this we need to make it true for this false and for this true okay so we added our dummy data in this way we can run a for loop on this list and we can show our widgets and we can put a condition on this variable that as it contains a video if it can contains a video then we can show it like this if it don't if it doesn't contain the video then we can show it like this okay now we need now now we need to make our uh widgets okay and also we need to make a search bar here so first we will make a search bar and after that we can make the widgets to show our data okay so we need to use single child scroll view then we need to use column because as you can see that both of these are in the vertical order the search and the remaining data okay so first after that we need to use uh some kind of margin from the top so we can use sized box for it height it will be 10. after that search bar widget and after the after that uh again uh height an empty space of 10 pixels again we can use sized box for this and after after that after that we can use suggested post widget like this okay so we need to make it constant like this we need to create the method for search bar widget we need to create this as well the method will be the return the return type of this function will be widget okay so for this we can use a container and put a decoration box decoration to make the uh corners of this widget circular okay so return container and [Music] the height of this container will be 40 width will be media query dot off context dot size dot width by putting this line we can get the width of the screen margin edge insides dot only left 10 right 10. why i used a margin because you can see that there is a margin here and here that's why left and right make this constant again after this we need to put decoration and box decoration border radius border radius dot circular and this will be 10 and [Music] and background color of this container will be color and for this 0 cross ff262626 and make this color constant okay so the decoration is completed now we need to add this icon and this text okay so we can use child and now these both are in the horizontal alignment so we can use row row children and now for the responsiveness we can use expanded like we can uh make it that this icon should get only only three parts of the total width and this search can get the remaining so we can use expanded and in the child icon icons dot search rounded and color will be colors dot white and for the second and we can add the flex one expanded child there we need there we can use text utils class our own textures class okay dot normal 16 search for this we need to use our custom color 0 cross ff 3 e 3 e 3 e ok so we can make this constant and we can also wait a second like this and we can and make this constant as well like this okay so i think our oh let me add semicolon and i'm returning the container empty container for this right now because if we don't return a container right now in this and don't def define the return type of this function then the return type of this function will be dynamic and we can't use dynamic type of uh widget in in column so it's better to solve this before we run our app so let me install the app in my mobile and let's see that what we [Music] have done so far so the app engine is installed in our mobile successfully so let me go to the search screen so it's showing me like this okay so let me oh we haven't defined the flex for this so the flex for this will be flex six yeah now now it's showing me perfectly okay so now we need to uh make the uh post screen and also if you see that the app bar is showing on the screen so we need to put a condition that on when we go to the home screen then app bar should show but if we go to a set screen then app bar should be hidden okay we will do that after completing the [Music] center part of the screen um okay so let's create this for this if you see that if you remember that if you remember that all of the data was showing in the vertical form so we need to use column children and here we need to use for loop and i equal to 0 i will be less than suggested dot length i plus plus okay write this right at this point we can put a condition if suggested post list index will be i dot contains video true then we need to show show with video widget and for example if this condition is false then show without video widget and we will pass we can show we can pass the index here like this now we need to create these methods alt enter create this method name this index index okay again we need to define the return type of the of these functions widget widget okay so first we will create the without video widget after that after this we will create with video widget okay so return container you might be thinking that why i'm going to use the container again so let me show you that why i'm going to use the container okay so if you see that there is a margin between the second one okay so that's why we can put a margin on this and on top as well so that's why i'm going to use uh container for now for this margin edge inserts dot only top two because there is a very very very little margin that's why i'm going to use only two pixels child row because the data is showing in the horizontal alignment that's why children and now if you remember that i told you the concept about expanded so if you see that all of these widgets have an equal uh width and height so that's why we will use expanded child will be container again because we need to define the height and width only the height of this widget because if we don't define the height of this widget then it will take the width like this but for example if the image have a height of 500 pixels so automatically it will take this all this height so that's why we need to use container again child image dot network and here we can use suggested post list again we are passing the index in the function of this and the params of the function index dot content link link one because this will be the first and we can copy this like this and we we can only need to uh change this we just need to change these content link one two and three okay now uh we need to define the height so height will be media query dot off context dot size dot width but uh now we have to multiply it with 0.33 because if you see that for example let's take the the width of the total screen is one so this part contains 0.33 value and this part is is in scale so that's why i'm using 0.33 here okay and we need to put a little bit of margin c here so margin edge inserts dot only write one like this just copy these two lines and paste in the container of other expanded widgets like this and for this i'm just returning a container like this okay let's run our app and see what happens so images are showing like this because we haven't used the fit uh property for image network so let me use this fit box fit dot fill and let's see that what happens see now this is showing me perfectly we can just copy this this property and just paste this property in the other widgets and control s and let me show you now see images are showing me showing us perfectly in this screen so now we need to make the with video widget okay so for that again we need to use container okay margin edge inserts dot only top two and child row because let me show you that wait a sec see and this these two children one two they are showing in horizontally alignment so that's why we need to use uh row and for this we need to use column this will be sized box or container okay so first we need to use [Music] expanded again because this contains one part of the screen this contain two parts of the screen see one one two two so this contains two part this contain one spot one part so that's why we need to use expanded again expanded child will be column children like this and the other expanded child will be [Music] container and flex will be 2 flex 1 ok so in this column we need to we can basically use we can copy this container like we used it before content link two ok so let me see what we have done so right now it's showing me like this but uh i think so you are wondering that why we are not not seeing this image like this because we had just copy and pasted the whole thing but but if you remember that in this the container is directly linked with expanded and we defined the flex for this expanded like this okay but right here but right here because the default value of flex is one that's why if if you need to define it then it's okay then if you if you are not uh defining it then then it's okay as well but uh that's why we didn't uh that's why it was taking the complete width of the expanded widget but right here we are using the container in the children of column and column is the child of expanded that's why it's not taking the third part of the screen so we need to define the width here like this copy this and paste it here now see now it's okay okay secondly we need to work on this okay so margin because as you see this and there there will be a little bit of margin between this and this so that's why we need to use margin edge inserts dot only left will be two and height most important media query dot off context dot size dot width just add these two 0.66 okay child image dot network source will be suggested post list index dot content link 3 fit box fit dot fill like this ctrl s and see and see the search screen is completed it is showing us exactly like we want okay now we need to go to our main screen where we need to hide this app bar okay um where is the main screen like this okay so where we have yeah return abba okay now like this we put condition here we need to use condition as well switch put a switch on index case 0 for example if the index is 0 which will be home screen so for this we are returning the app bar like this but if the index is one which is search screen then we return the app bar but the height of this app bar will be 0.0 elevation will be 0.0 like this and default return f bar toolbar height 0.0 elevation 0.0 like this or we can return the app bar we can just return default app bar here like this okay so let's try to run this and see okay now if you see that the app bar is not visible but if we go to our home screen now this is visible but if you see the status bar color for this screen is blue but for this it is black so we can fix this where we are returning our app bar we can just colors dot black and now it's black okay so the search screen is completed home screen is completed in the in the previous video and in the next video i will show you that how you can clone the profile screen this one okay subscribe our channel press the bell icon

Channel: Proglabs Official

Views: 27

Keywords: proglabs, android tutorials, .net tutorials, unity tutorials, beginners tutorials, flutter instagram design, flutter instagram clone, flutter for beginners, flutter tutorial, flutter ui, flutter ui design tutorial, fluter responsive ui, instagram search screen design, flutter design course, flutter design app, ui ux design, ui, ui/ux design full course, ui/ux design, mobile app, flutter responsive ui, flutter responsive ui tutorial, flutter front end tutorial, part 2, flutter

Id: na4G_CQQgTE

Length: 31min 31sec (1891 seconds)

Published: Mon Nov 29 2021