Build INSTAGRAM in FlutterFlow | FULL TUTORIAL | PART 1

hey everyone my name is Will hobick and today I'm going to be walking you through how to build a full Instagram copy in flutter flow this is going to be a series where essentially I build out every page as much as I can that includes stories posts chat Etc and it's going to be just live for you from scratch so building out the pages building the Firebase structure Etc this is kind of a sneak peek of what we're going to be building today so this is what I built at the end of the tutorial so make sure to stick along and yeah you'll basically see how to build the menu the stories and some of the actual feeds section some of the resources I'm using today obviously flutter flow I'm using this Instagram UI kit as a very very basic um you know just mock-up to to look at as I build the pages of course we're using Firebase and then I will be adding some some additional resources in the future but that's pretty much everything you need today so yeah just make sure to stick along and with that said I'm gonna go ahead and jump right into it okay so we have the Instagram UI kits with the feed pulled up so maybe let's start with this top menu so here's the Instagram logo so you're going to double click on it or triple click and actually like select the image go to export and you're gonna 4X export it as a PNG so we want it four times the size this here um I'm just doing that for this case and we have the app bar here everything toggled off we're going to drag an image in the center title area and then we're going to upload that Instagram icon or Instagram logo okay so once you do that it's going to be cropped here so what you want to do is change the height to 30 in this case uh the width of 104 it should be the same year 104 and 30. great and the other thing we need to do is actually it might be fine for now um yeah the spacing is default there so we'll leave it and then we need these three icons so sometimes uh there are issues with the way we use flutter icon and some of the others you can see I was having issues here I'm actually using the compound like paths that were created in the circular file so I'm going to use some basic icons for now but I'm sure you can find these online and I'll also make um you know additional videos where I will include adjusting the icons but for now we'll just put like filler icon so I'll plus a heart and a chat button so y'all grab the row I'll drag into actions same thing this is 15 from the side so if you look here it's 14.99 so I'm going to give this row 15 pixels of padding and then I'm going to grab the icons put icon in there this one is going to be the chat icon maybe we just need a chat bubble let's see is our round one maybe let's see if one awesome has on nope okay so we'll just choose one of these there we go 24 and it's black uh then we want to duplicate it uh let's see how much padding is in between these it looks like it's 23 and here I'm holding option on a Mac or Alt um on a Windows computer I believe so 23 here 23 this is going to be the heart icon awesome and then lastly we want the plus icon so Plus see here let's just do one of these great um and actually what I'm going to do is see if we can find like a better one in the circle or this works actually so this is ADD box see if there's a different one okay so I'll do this one and yeah so we'll just keep those for now and those are also 24 pixels right or close to it um so we'll leave the sizing for now uh but yeah so here we have you know this this menu here if you click in the app bar make sure the elevation is zero and now we can actually start this row here of stories okay okay so now let's actually make the stories section so we already have a column here so we're actually going to add a row to that so it looks like this to talk you through it we're going to add a row and then within the row we're going to add a column within the column we're going to add a container then the text below that from there we're going to add a another container within the container and then that we're going to add a stroke to and then add the image so if we go to the dashboard here and I add the row there's the row so we have a column like I said there's a column we're going to have the container and then we're also going to add the text thank you and the one thing I'm actually going to start with before making what is here is actually the yo plus your story so that's not actually even highlighted um unfortunately in this so I'm going to make that ahead of time so we have the container here and I'm going to make it a circle and we're going to make it 60. oh we're going to make it 60. and then from there I've gone ahead and uploaded a picture of myself already so I'm just going to select that as an asset a filler asset right now so there we go cool and then the text here is going to be smaller so let's do like 11.5 or 12. it's going to be normal and it's going to be 50 so just go to the front here and type 80 it's 50 percent and then let's do like eight padding below and then you'll actually notice if you count in the app um the max number of letters here I actually don't even know if it'll allow you to to do that here um it's actually 12 but it looks like we can't add that in the text unfortunately so we're gonna just ignore that for now we might change that when we set it from a variable but it actually says your story for this one so that's easy and this column actually is 15 away we want to keep the row because you can actually scroll to the edge so we're not going to add padding to the row we're just going to add it to the column here and now I need to add the actual like blue Plus in the bottom right so I'm going to click on this container press command b or you can go over here and right click and click wrap I'm going to choose a stack then I'm going to add another container let's make that a circle let's make that like 25. set the Border color to white and then the Border width to let's try three The Fill color let's make it the secondary blue and let's go back to the stack and move it to the bottom right hand corner boom okay now we just need to add the plus to it so let's add the plus I'm going to add an icon amazing this needs to be like size 10 maybe and then a plus for the rounded edges okay so that plus is way too small so maybe let's try 16. make it white yeah that looks pretty good to me uh maybe the stroke would be a little bit bigger so I'll make it one larger and then let's keep going so four boom um and then this maybe needs to be a little bit larger as well so let's try 30. pretty too big 30 actually looks pretty good but we might need to move it past the outside so I'm going to do 1.2 and 1.2 see yeah that looks pretty good for now uh it might change the size of that in a little bit but okay let's continue on so I'm going to actually add another column here in the row and this one I'm going to add I'm going to go back to this column actually what we need to do is add a new row here so does your story always stays but the uh the other items load over here to the right so I'm going to add a row here row there we go and then within that row I'm going to add a new column within the row itself I'm going to add 15 padding space it out and then we're going to do the pretty much the same thing so in this column I'm going to go back I'm going to drag a container make that size 60 actually I'm going to make it 65 in this case because we need to add the fancy gradient so 65 and then this container let's go and turn on the gradients let's change the angle to 45. let's add another color and we're just going to Ballpark it here so the bottom left oh and this needs to be 0.5 so the bottom left is a yellow so let's do a yellow here this is the yellow I chose the secondary color is this like reddish color same thing if you want to copy that hex code and the top one is a dark purple you can copy that as well boom we have our gradient beautiful while we're here I also want to make sure the column is aligned um oh it should be good actually it's just the the row and this will be fine actually in a moment so the container here what we need to do is add another container inside so there we go and then within this container this needs to be a circle and 60. the Border color needs to be white the width needs to be two and then we're going to add a image here as well a filler image oh and then we also need to set the vertical and horizontal alignment to zero so there we go now we have this cool effect and then we also need to add the text as well so I'm just going to copy it actually and I might have to go to the tree here and I'm going to paste it and this is actually black and 100 percent cool so the other thing too is it looks like it's kind of challenging the way I've done this so what I might need to do is add 5 to this so let's try 13 yeah so I needed to add 5 to this padding because the outside container here is 65 and this is 60. so I want to add five padding to make sure these are the same there we go you can kind of see that there that math isn't 100 right but at least these are going to be aligned and then I'm just going to add text here I didn't it's a username so now we have this row and here's the cool thing right so I think we have a user's collection great so for now I'm just gonna you know put this in here just to show you if we go to the row we have a row here but I'm going to go to the second row I made I'm going to go to the query add a backing query and let's query from collection just to show you click users do list documents it's fine click confirm and then yeah so now we have all the stories here and what we need to do is just add that padding so if I go to the column let's turn the back padding to 15. now we have a row here and if I click on the bigger row and I do scrollable then you can see there we go now we have the effect of the scrolling and obviously we'll adjust this so it's not just pulling from the user's collection it's pulling from a stories collection but you can see now we've added the story section at the top the your story here then what we need to do um Forward Thinking is this column we're just going to add an action on it to add a story and then we're going to make this column point to the stories query that we're going to pull from okay okay now let's make the actual images themselves so we are going to choose a list view because we want to basically have like page loading so all the posts don't load at one time so we're going to go over here to the list View and drag it into the column okay one other thing that I might do is add a little divider so I think you can see the list view here I actually have trouble sometimes with the divider I'm going to be honest here um so what I'm gonna do instead of the divider it's actually kind of funny is I'm gonna add a container in between the list View and the column and oh I think it actually added it in the list view so let's try that again in between the list View and the column I'm going to add a container and I'm going to make the width infinite I'm going to make the height 0.5 in the fill color I'm going to make that secondary text color that actually is even way too um dark so let's see does it tell us see yeah I think this is way too dark personally I don't think this is accurate d-a-d-a-d-a but let's try it no okay we'll go for it so now we have the divider and the divider here let's see how far it is away from the um that's so it's an eye okay I I think it's probably 10. I'm gonna be honest um but let's go for it so this is gonna be 10. um okay great so now we have a barrier here and yeah so now we actually have the list and yeah there's no barriers between any of the images so we're good there or no dividers so the list view we're going to add okay I'm actually going to add a column and then within the column just to talk through it within a column I'm going to add a row for this image that's a stack like whatever else we need another row and then maybe a page view initial formatting and then the text Etc so but we have a this is all going to be within a um a column so it's all together so let's go for it so we have the column we have the row let's add a row the padding for the row is 15 as well I'm pretty sure so I'm just going to go ahead and add padding here for 15. in the row we're going to add a container that's a circle and this is going to be let's actually see here 30 so let's try it 30 great there's a slights I don't know if they have it in here there's a slight stroke on the outside there so I'm gonna assume it's the same as the border so the watercolor the idea it's going to be 0.5 as well just in case again again I'm just going to add my image here um as a filler and then we need to add the text so how far is the text away let's find out here as a base it is nine same thing I'm going to assume it's 10 away so we're gonna add the text and it is bold in this case bold boom and it's 10 away and let's say it was just this rate the app of world Harbor here that looks pretty good it's our body Tech semi bolds um and we need to add the iPhone on the other side so what I'm actually going to do here here's a trick add a row you're going to wrap the container graph widget in a row and then I'm gonna drag the text within the row and then in this row I'm going to add an icon and then I'm going to go to the row and I'm going to make it uh the space between so there we go now this is going to stay on the left side and this icon is over here I think the icon size I think it's 24 I'm gonna be honest with you this is too big yeah 14. so 14 but I might be way too small so chat you want these dots here yeah that's way too big so let's try like 18. 18 honestly looks pretty good to me I'm gonna be honest so we're gonna stick with that and those are also black within the app let me check I'm doing this live on my phone too so it's pretty funny so this is black and now we gotta add the image which I'm also going to assume is 10 below because it's equal spacing so let's add the image oops image into the yeah it's not gonna work let's add it into the column here and the width is going to be hmm we want like 1080 1080. oh we do make 500 no for me uh 300. you want it to be a square but I don't know what the exact ratio is here so we'll do 300 by 300 yeah that doesn't make sense uh let's do 500 let's do the height being 400. 350. for a iPhone 13. technically it's 390 but we'll do 350 and go for it and um like we said we need the we need 10 below here for the spacing kind of low great there we go and we also now need to add icons below I'm going to not like add a stack or anything to this yet So within this column we need a row let's assume the row has padding actually let's just go to this let's see how far 10 again let's just do 10. and then we need the like button the chat button the sand and the bookmark and it's also going to be padding 15 and 15. same thing we're gonna do that little trick so I'm gonna do space between I'm gonna add another row in here within this row I'm going to add an icon see the spacing between these as well 14. so this icon is going to be the like button amazing and the next one is 14 between this one is going to be the chat the comment button so we're gonna do the comments then we're going to duplicate that again this is going to be the send uh let's try Arrow [Music] I love that but it's the wrong icon here okay let's just do a basic sentence send you can tell I'm a designer and I really want the icon to be the same but I don't want to waste time on that right now so this icon lastly we're going to duplicate it I'm going to drag it into the row and it's going to end up on the far right and it's going to be a bookmark boom there we go so now we have the bookmarks here um everything's looking pretty good I think there's a little bit more spacing for being honest these look pretty close together so I'm gonna do like 16 instead but yeah so there we go here um I'll actually show you in the future how to add the slideshow but for now we're just going to add this basic one so we have this here now we need to add liked by and the body in the description and everything so with that it looks like I'm actually going to add a another column here within you this so if I go to the column the column add it I'm going to add a padding as well teen 15. and then within that we're going to add the text and the text we're going to do the expansion to be oh I actually won't work so we might need to add a row here let's see yep we will need to add a row because we want the text to be on the far left side so what I need to do actually what what I could do is go to this column maybe I'll just do that uh set everything up on the far left here left alignment not centered so this text now if I set this up correctly I want the column to be 10 below um where actually this row I could do 10 below and I'm going to get rid of this column great so this is going to be the likes buy so let's just put something here for now like bye all right I'll show you how to do this um effect so actually what I'll have to do is wrap this in a row so now it actually works out so we can do that full length actually we need to do it short and what we're going to do is liked by is going to be not semi bold it's going to be normal we're going to duplicate that and we're going to add semi-fold and we're going to add a username and we're going to duplicate the text again right on the other side we're going to add a space right and another space and then we're going to duplicate that and write others but wait it's going to be semi bold again and there we go there's that we're going to duplicate this row actually we're just going to add the text below here we go column we're going to left the line as well and this text we are going to add maybe like eight week padding um maybe six let's try six I think it's a little less there we go and let's imagine this is a username and then here's the challenging part um so this is really challenging because what we want to happen is we want this to be bold right we want this font to be bold but then we want the rest of the text here to be semigold right so it kind of creates a problem in flutter flow because we can't wrap it in a wrap from my understanding because like what will happen is the text will wrap to the next line but it'll be the whole other text box so this is just kind of an issue we have to face and figure out an alternative here unfortunately so my solution here is just going to be to only have maybe like a one line um text in here and then what I'm going to show you how to do in the future is add the read more I'm going to show you how to add a custom widget in a future video with the the more there but in this case we have the text and so what I'm gonna do for now is just wrap that in a row and I'm going to duplicate this text and I'm going to add um some padding here and then I think it's like a little spaced out more right no it's not so let's just do like yeah three and I'm gonna make this normal and I'm just going to put random text here all right so let's say like that's the caption of the picture okay then we need to add the view all so that's next in this column uh you all do all comments this is view all right what we'll do is combine text in a moment so view all 12 comments and this is going to be normal and the text color is going to be Gray and let's do the spacing of this row so what I'm actually going to do is remove the six and remove the six this row here I'm just gonna do six and they comments I'm going to do six right uh so there we go now we have this set up uh maybe I will change this back to eight because it looks like it needs to be spaced out just a little bit more in my opinion there's eight and then lastly we just need the new kind of section uh or no we need two more things so we need to add a row here row this row is going to contain the image add a comment and some emojis so within this row we need to add another row we're going to add the image this is going to be really small my guess is 20. 20. same thing I'm going to just add my image here so that almost looks too small so maybe 25 yeah 25 cool and this is going to this row is going to be like 10 below and it's going to have add a comment next to it so I'm just going to copy this text I'm going to paste it oops I'm going to paste it in the row here let's do that uh we don't want to grow in a row we want we'll just add text in here so it's gonna be three away it's going to say add a comment and the primary text is going to be the secondary or the text color is going to be secondary and it's going to be normal and it looks like sorry this needs to be maybe six and even more than that let's start 10. yeah it looks pretty good uh now the Emojis are on the other side so uh another row on the other side you need to do the space between add another row here and that Row's gonna have icons so icon one actually it needs to have emojis so the first one is gonna be let's do let's see here let's do a heart emoji so if I can find the heart emoji let's see I might have to search it my Mac art there's the heart emoji oh it looks like it's different here um let's just do like surprise like confetti then let's do maybe star eyes and then there's a plus sign where you can add new emojis but for the sake of this I'm just going to add one more emoji there we go and let's put a little bit of spacing between each one two let's do like eight okay so now we have Instagram pretty much set up here uh I don't think the spacing is perfect it looks like we can add a little bit more spacing Maybe so maybe this is like well and 12. and I think yeah I'll definitely try to like clean it up but I think we definitely have a good base here because what we can do now is just fill in everything right we gotta add the actions um we can add a lot of other things but we have a good base going here uh the last thing maybe you just needed to be added is the time as well where it says like eight hours ago one minute ago Etc so let's add that it's kind of a Finishing Touch let's do that I'll just write eight hours I go and again we're going to fill all this in with the appropriate data we just need to actually set it up in our database so there you go eight hours ago yeah that looks pretty good to me um I'll add the images as well at a future dates but yeah yeah I'm pretty happy with how this looks so far uh like I said obviously for this list view we're going to add options to it so you can scroll but for now it looks pretty good um maybe I can even show the scrolling column um if I duplicate the list View and maybe I just do a backing query here and we're the users let me just show you cool maybe we need to add spacing to this so I think it's probably like 325 but yeah like this looks pretty good um you can scroll through you know it looks similar to Instagram right we have the stories we have all that stuff the stories go away um so yeah just like that we pretty much made the UI in flutter flow the feed page now we're just gonna get off okay the last thing I'm going to end off with is gonna be a fun thing so we're actually going to build the little heart like animation when you click the heart icon we're not going to add a toggle for the heart icon yet because we haven't built out the liking system for a post but let's actually just add that fun heart icon that appears in the middle of the screen okay so what you'll notice is it always appears in the middle of the post so even if you like a post as you're like scrolling it's going to appear at the middle of the post so you need to go to the image and we need to wrap that image in a stack and we're going to add an icon to it for this icon we want it aligned in the middle here so I actually need to just set that actually here and the icon we want it to be white and we also want it to be a heart that's filled there's our heart icon let's make the size of 50. okay that's not big enough maybe 100. we could even do maybe 120 okay great I think that's awesome and now what we wanted to do is animate this in so what we want is it's basically on action trigger add animation and we wanted to scale we want the scale to be a bounce we'll try balance and then we'll try elastic but I'm pretty sure we want balance okay so what we'll do is have the duration be like 300 and the initial scale is going to be zero and the final scale is going to be one so let's see what happens but we want high before animating okay so balance was pretty quick so let's try elastic and this was also a pretty quick animation wise let's go back to 600. perfect I think that looks pretty good actually um if you look at it like compared to the Instagram heart or maybe we'll even try like initial scale too let's see yeah it honestly I think that looks pretty good um but we want it to hide right we want it to shrink after so then what we're going to do is add a what is it we want the scale to go back to zero so we're going to apply a delay of like it sits there for a pretty good time so maybe let's do a thousand and you need to see how it's going to be one and the final scale is going to be zero and we want these enemies out um so let's try it now okay so preview okay so that was pretty slow so let's try like 300 and let's do ease out okay still pretty oh whoops uh there we go that's right that was still pretty slow let's try like really quick let's do a hundred uh actually I'm looking at my phone and that still looks now that looks a little fast can we do 100. yeah now we might plug in it now here because we've done it so many times uh let's try it again yeah we've kind of bugged it out I think that was pretty good though I'm gonna be honest with you um pretty happy with the way that heart looked and then if we go to the icon here let's just test it so add action animate obviously we gotta add all the actual stuff but the icon will rename that we want to just do start animation and we want non-blocking so now let's see if we can do that animation here see let's see if I click this there we go I think it looks pretty great um and like I said when you scroll and you click it still it's going to stay up here but yeah now that's a great way to end the the first kind of video here is just adding that fun little animation to liking a post so yeah now with that you've been able to basically build the UI I'm pretty happy with it the next video we're actually going to be hooking up a lot of these components building out some of the database and jumping into some of the other pages but um obviously there's a lot going into each of these pages so these videos might be a little long but obviously the goal is to build along with you that's the whole point I'm not going to skip through a bunch of parts so yeah I hope you enjoyed the video go ahead and give it a like comment um if you have any questions want some clarification And subscribe to be notified when the next one's release thanks

Channel: Will @ FlutterFlow

Views: 8,259

Keywords: flutterflow, flutter, firebase, fluttergo, flutter tutorials, flutterflow tutorial, dart tutorial, flutter custom functions, no code tools, no code tutorial, no code alternative, flutterflow no code, how to use flutterflow, flutterflow templates, flutterflow components, flutterflow custom functions, flutterflow custom actions, flutterflow custom widgets, instagram template, instagram close, how to recreate instagram, instagram in flutterflow, social media app in flutterflow

Id: WP55UdjbYIA

Length: 41min 38sec (2498 seconds)

Published: Sun Nov 20 2022