Flutter: Instagram clone Design | UI/UX | Profile Screen | Part 3 - Final Part - Proglabs

hello guys and this is junaid khan and welcome to my channel i hope you all are in a good state of your health this is the last video of the series in which i am showing you how to clone the design of instagram and flitter in this video i will show you how to clone the profile screen of his instagram sorry before this video i showed you how you can clone the home and search screen in flutter so let me first show you that what we are going to clone this is the profile screen which we are going to clone okay so as you can see there is a abba there is this section post followers following and all of the things and you can see there is two uh attached fragments with it okay so uh first we will develop the develop the abba because as you can see that when we open the home screen then the app bar is like this when we open search screen the app bar is gone is not visible and when we open profile screen the app bar is like this so first we will develop the app bar and after that we will clone the remaining screen okay so i am using the previous project which i created for home screen and search screen so first we have to open main screen because we are showing the app bar in the main screen case 0 is for the home home screen case 1 is for search screen and i already told you about the default so we will add a new case which will be case case 4 return abbar like this okay so for this we need to add a background color colors dot black and title row why i'm using this so let me show you that this is basically the because in app bar if you want to show anything then we need to use the uh variable or you can say the options available in app bar for showing the for anything you want to show so we we are using app bar for this and we will add two uh sorry we will use a row and the title and within the row we will add two more rows and for the parent row we will add main access alignment as space between and we will add two more rows one for this and one for this so main access alignment space between children again row children icon the icon will be icons dot lock outline lock outline rounded and the second is some kind of spacing width width will be five after after that after this text utils okay we have to import this here textuals make this variable as final okay so now we can use textuals here okay so bold 18 junaid 892 color of this text will be white like this okay for the second we will again add row children image dot asset asset slash icons slash add post dot png and the width will be 20 height will be again 20 and color of this will be white now we need to add spacing sized box width will be 15 for now and again icon icons dot menu like this now we will run this app and check that whether uh appbar is exactly like this but we want to develop or not it will take some time to run [Music] so the app is installed in our mobile so let me navigate to the profile screen so as you can see that app bar is looking good on search the app bar should be hidden on home the app should like this exactly like this and on profile so now we will start working on the profile screen so first we need to add some const modifiers in this okay but one thing is missing the drop down arrow so let me add that as well icon icons dot keyboard arrow down and add const modifier for this and press water reload yeah now it's looking exactly like uh we see we we see on instagram so now we have to open our profile screen okay so let me see that what we have to develop okay so uh first we will develop this section so for this we will use row because we can see that this is uh this is another section this is first section and this is the second section and for this we need to use column for the first section and for this section we need to use uh row again okay so first we will use a single child scroll view because you can see that [Music] it's scrolling so that's why we need to use single child scroll view and the child for this will be column children and the first children will be as you can see we need to add some margin for this so that's why we need to use container container and the margin will be edge in sets dot only left 10 right 10 and top 10 okay like this and the child of this will be row children and first we will divide this into two parts for by using expanded expanded flex of this will be one and for this we will use column children and now we need to use column children and mean first we need to use circle avatar and radius will be 45 background image network image and for the url we will i will mention this url in the description and after the after this we will add let me see yeah after the circle avatar we need to add some empty space sized box by using sized box height height will be 10 and again we need to use text here so we will import our file from creator object of this class text utils textuals make this object final and text utils dot normal 16 you need han color of the of this text will be white now we need to add const modifier okay reformat this code like this so the first part is completed now for the second row we will use expanded again but this time the flex will be 2 because this is this section is taking a larger space than the first section so children and spay for the first so let me open the this again and as you can see for this we need to use column column and column so there are three children's of this row column children and [Music] text utils dot bold 20 and 16 colors dot white need to add some space sized box sized box height will be 10 again text utils dot normal 16. normal 14 i think so is enough posts colors dot white okay so so the first uh child is com for the second and third we can just copy and paste this and just change the text like 158 followers and thousand following so let's reload our app and see that what we achieved so far okay so this is looking like this so we need to add a main axis alignment space around and control s so now it's looking like what we want okay so now we need to develop the second the this part basically yeah so we need to develop this section now and for this again we need to use uh container container margin edge inserts dot only left 10 right 10 and top 10 okay but now we need to use row again because as you can see there are two uh children's and both of them are in the horizontal horizontal order so that's why we can use row for this row children and expand it again flex 8 and for this we will use container again and height will be 40 and decoration box decoration i'm using box decoration so we can use the radius for the corners and we can use uh the border color so that's why i'm using the box decoration border radius so the border radius dot circular and the value of this will be 5 and border border dot all color colors dot gray like this okay now we need to uh develop the second [Music] second child for the second child we first we need to add space the space will be 10 pixels again expanded sorry i'm adding the space at the wrong expanded flex flex will be 1 and child child will be container again height will be again 40 decoration the same decoration we need to pass it here we can copy and paste it from this okay and the child will be icon keyboard arrow down i think so yeah keyboard arrow down and the color of this icon will be gray so let's press or reload and see so the app is looking like this now so we need to add a text here where for edit profile so let me add a text here and the container of this box decoration child center child again and text utils dot normal 16 edit profile and the text color of this will be colors dot gray okay so hot reload it's looking like this but the color of the of this text should be white white hot reload and c now it's looking perfect so now we need to move to the second part sorry the third which is this we need to make it like this two text views and one is icon okay so for this again we can use for this uh column and for this icon and for both of them we can use row again we need to use container margin edge in sets dot only left 10 right 10 and from the top 20. child row children expanded flex for this will be 9 and the child of this will be column children text utils dot bold 14 story highlights color of this text is white and again empty space sized box height 5 text utils dot normal 14 keep your favorite stories on your profile okay and for the color colors dot white okay so we will add const modifier for this and for this okay so the second child will be expanded again flex will be one child will be icon icons dot keyboard arrow up and color colors dot white and size will be 18 okay so add const modifier and how to reload our app and see that what's developed so now it's looking like this so we need to add uh main cross excel i think so main access yeah cross axis alignment for this column so cross axis access alignment dot start and see whether it's fixed or not and now it's fixed okay so now we need to develop the this section where we are using circle avatars and for this we are using column but for these we are using a simple circle avatar okay okay so again we need to use container container margin edge inserts dot left only sorry first left is 10 right is 10 and from the top top 20 okay child we need to use single child scroll view here because as you can see this this will be scrollable so that's why we will use single child scroll view in this [Music] single child scroll view scroll direction access dot horizontal child row children first we need to make this child padding edge in sets dot only write 10 child column children elevated button you are keeping the on pressed as empty because we are not doing any back end right now so that's why we don't have to specify any functionality here and child will be icon icons dot add size is 35 and style of this elevated button will be elevated button dot style from and shape of this button we need to make it uh circular circle border side border side color colors dot white and padding i am in this i'm sorry padding edge insides dot all 15 and primary colors dot transparent i used color transparent so that this will be this will have transparency and for the shape i am using circular border and i am defining the border color as white and the child is icon plus icon so let me add const modifiers okay after this we need to add text but first space empty space sized box height 10 and text utils dot normal 12 new and color dot white so reload and see what [Music] we see okay perfect now we need to create empty circle avatars okay so for this we can run a loop for and i equals to 0 i is less than 10 and i plus plus favorite stories widget alt enter create this method here and the return type of this will be widget return padding as in sets dot only right 10 left 10 okay child circle avatar the radius of this circle avatar will be 33 or you can check that what's is what is the radius which is matching with exactly like instagram so that i am using the custom color ff 3 e 3 e 3 e ok so add this and okay so ctrl s and see now it's looking fine but the widget is in the center of the whole container so we can add a cross access alignment dot start and open now it's perfect okay so now we need to make this this is basically tab bar and in this tab bar we need to define two children one is this and one is this okay let me minimize all the widgets and const and like this now we need to add tab bar tab bar number of tabs we will add this later indicator color indicator color colors dot white and indicator weight which is which will be 0.8 and indicator padding edge inserts dot zero and padding will be zero as well as in sets dot zero and now we need to define our controller so we will add the controller at the top late because we are we will initialize this controller in init state so that's why i'm adding late here tab controller init state tab controller tab controller length will be because there are two children so that's why we will add two and vsync will be this right now it's showing me error we will add with single ticker provider state mixing okay now we will add controller tab controller and tabs so for the tabs we will add like this tab icon icons dot grid on rounded and for the second we will add the icon like person pin outlined okay so let me hot reload right now it will show error because we hot reload our uh [Music] app so that's why init state function isn't called so for this we need to run our app again now you can see that it's working fine okay so now we need to create these children's for this i will use expanded widget so it can take as many as much space it wants child tab bar view you will define the children after this controller tab controller so it will work with the tabs children grid view dot count cross access count though so the cross axis count is 3 let me show you how i judged that the cross axis count is what 1 2 3 so that's why i put 3 here if you want to add another then you can put the cross access account to four and children children will be four and i equals to 0 i less than 10 i plus plus container and margin as insets dot only right three and top three because as you can see that there is a little bit of margin between every child so that's why i'm using container child image dot asset assets slash images slash dummy post okay so now we can oh yeah another thing is fit box fit dot cover let's hot reload now it's showing me nothing so let's see that white okay so i think so we are missing some it means that it stay it needs to get a specific height so that's why it's showing us an error so we can enclose our column into a container with media query dot off dot size dot width and height media query dot off dot size dot height let's rerun our app and see and okay so because the controller's length must be two but we only defined or one child so that's why it's showing us this error that controller controller's length property two doesn't match the number of tabs one so we can add another grid view here now it's working perfectly but as you can see that if we are scrolling here then it's scrolling only here but we need to work it like that that if even if we scroll here then the total screen should scroll up not only this part so we can add a controller scroll controller here like scroll controller scroll controller equals to scroll controller and we will define the controller here scroll controller sorry we should define the width yeah like this and also we need to we need to add one thing more we need to add this controller here as well in the grid view scroll controller we need to define the scroll controller here and also in the first great view as well like this so we can hot reload our app again and see try to run our app again one more thing we can try to enclose this into scaffold body okay and the background color try to check that it should so now it's working fine as you can see okay and if we navigate to our home screen it's it's also working fine the search screen is it's also working so by following this complete playlist you will be able to clone the almost complete instagram design and flutter as you can see that i haven't used much packages i almost done everything um on my own so only the dash circle library package is being used but um anything else uh totally developed by uh custom code so i hope you like this playlist and [Music] subscribe our channel and press the bell icon so you don't miss any new videos any new tutorials from this channel till then take care

Channel: Proglabs Official

Views: 35

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 profile 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, flutter

Id: c6_bIimCA6Y

Length: 39min 29sec (2369 seconds)

Published: Mon Nov 29 2021