📱 Staggered Gridview • Flutter Tutorial ♡

hey what's up welcome back to another quick flutter tutorial now we've seen grid views before but what if you wanted a bit more of a fancier grid view something that looks a little bit more staggered like this now I think this looks really nice and so let me show you how to do this by jumping into the code this tutorial is sponsored by Rotator now I get a lot of questions about how I show off my apps in a cool way in my intros and is through the help of a software called Rotator they have pretty much every device you can think of to use as a mock-up and my favorite part is the ability to control the motion to make it swivel and rotate in any way you can imagine so make sure to use the code Mitch at the checkout to get a little discount and thanks rotato for sponsoring this video so I've opened up a brand new flutter project and just to keep everyone on the same page in my main function I'm running my app which brings us to this scaffold and if I just come over here I've already prepared some images and I have it in this folder so you can go to the Internet grab whatever images you have try to make sure that the height like the aspect ratio is kind of different and so I've got my project let's open up the library and just drag the images folder in the library cool so let's come back to the project and make sure to tell it that we are going to import some assets so in your Pub spec.yaml let's scroll down and go to your assets and just comment this out and let's say library slash images and save it cool so this is the images folder now I'll link the package below it's called flada staggered grid View and copy this and let's go to the pop spec yaml again and we're going to import this package so if you actually look at this closely you can see there's a few different styles you can go for but I'm going to show you in this video The Masonry so usually we've used so many grid views before on this channel and so it's very similar to a grid view except we can now just say masonry grid View and then now we can import it and then we've got the Builder so the Builder let's go sliver simple grid delegate with fixed cross access count cross access count this should be similar to our normal regular grid views and for this one I'm just going to have a two cross axis count meaning I want two columns okay let's see if I print some blue containers now let's actually give some padding okay so we have 200 for the height they're all the same containers so we can't really see the staggered effect so now let's bring in the image so the way I named the file is in the images folder it's image one through the six okay so let's just separate this out and the index is going to start from zero so let's add one to that number and convert it to a string so this should start from one to six and if I save it you can see there it is sweet sweet so all of the images despite the aspect ratio it's just kind of seamlessly fits in together and yeah so if you change this cross axis count to three like I said that's how many columns you want cool now one little tip is you can wrap your image with a clip erect and this one is good for just clipping the Border radius just to make it curved and that's it if you've used grid views before or even list views you can see it's very similar to that and there's other styles that's not just Mason grid view there's another few Styles so you can check it out if you made it this far the tutorial drop me a Purple Heart in the comment thanks for watching and I'll catch you guys in the next one peace [Music] thank you foreign

Channel: Mitch Koko

Views: 23,416

Keywords: flutter, mobile app development, mobile app, flutter ui, dart programming, ios, android, authentication

Id: AloeoaZhjS8

Length: 4min 14sec (254 seconds)

Published: Fri Mar 10 2023