Flutter Tutorial - GridView VS Staggered GridView | With Dynamic Height

Create a Flutter GridView VS Flutter Staggered GridView with dynamic height for the items. With the Staggered GridView, you can display unique column and row designs with custom sizes in Flutter.
Click here to Subscribe to Johannes Milke: kzbin.info...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/stag...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Card Design Tutorial: • Flutter Tutorial - Car...
Fix Bottom Overflowed By Pixel Error Tutorial: • Flutter Tutorial - Fix...
Hive NoSQL Database Tutorial: • Flutter Tutorial - Hiv...
SQFlite SQL Database Tutorial: • Flutter Tutorial - SQL...
In-App Rating Tutorial: • Flutter Tutorial - In ...
Flutter Layout Basics Tutorial: • Flutter Layout Basics:...
Reorderable ListView Tutorial: • Flutter Tutorial - Reo...
CheckBox Tutorial: • Flutter Tutorial - Che...
Animated List Tutorial: • Flutter Tutorial - Ani...
Animated Icon Tutorial: • Flutter Tutorial - Ani...
Calendar Events App Tutorial: • Flutter Tutorial - Cal...
Persistent Bottom Sheet Tutorial: • Flutter Tutorial - Per...
User Profile UI Tutorial: • Flutter Tutorial - Use...
Drag & Drop In ListView Tutorial: • Flutter Tutorial - Dra...
Create Invoice PDF Document Tutorial: • Flutter Tutorial - Cre...
TIMELINE
0:00 Introduction Flutter Staggered GridView
0:26 Create GridView Builder
0:54 Set GridView CrossAxisCount
1:11 Set GridView MainAxisSpacing
1:29 Set GridView CrossAxisSpacing
1:37 Create Staggered GridView
2:03 Staggered Tile Count
3:32 Index IsEven For Advanced Staggered GridView
4:04 Index Modulo For Advanced Staggered GridView / Instagram GridView
5:11 Hot Restart & Staggered GridView
5:27 Staggered Tile Fit
6:57 Staggered Tile Extent / Slivers Staggered GridView
8:59 Summary Staggered GridView
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke

[@HeyFlutter]

This might help you :) 👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com Source Code: github.com/JohannesMilke/staggered_gridview_example

[@muneerAbro]

Awesome Video. Love the way of your teaching

[@user-uz8gf5kv6y]

I adore your videos.Thanks.Subscribed and bought access to complete code)

[@auliasabril1899]

Great job mike 👍

[@programingtales7514]

I was looking for this thank you very much

[@FlutterShipp]

Really Informative!

[@legardemontcho6739]

5:30 thank you!. The documentation is so confusing and don't explain exactly the different between all constructors. You make so gut. Thank you so much.

[@BooleanDev]

5:58 thank you! this is exactly what I was looking for. The documentation is so confusing and the examples aren’t well labeled

[@zeebradoom4774]

IVE BEEN LOOKING FOR THIS FOR 2 WEEKS OMG THANKS

[@HeyFlutter]

You are welcome, @zeebradoom4774!

[@ranjanadeore2957]

Excellent sir thank you

[@hashankannangara8723]

Awsome!!

[@dhrubrawat9316]

So nice.

[@francescomaccarrone6609]

hello and thanks for the video very very nice. I d'like know if is possible rendering the StaggeredTile forcing a specific order ?

[@luisrenanledo4044]

resolveu meu problema! muito obrigado

[@chekhanimlhadj4608]

this video is exactly what resolves my problems thanks

[@HeyFlutter]

Glad it was helpful, @chekhanimlhadj4608 😀

[@IIFJAS]

Hi! Thanks for the informative video. In staggered grid, I am facing memory leak issues. Do you have any solution to this? Thanks in advance.

[@aminsamad6900]

Thanks

[@akrambensebaa1844]

hello and thanks for the video . I'd like to know if is possible to select multiple item to delete them all ? Thanks in advance.

[@simaxadvertisers4114]

saved me tones :)

[@tams45]

Please make a video for logging in and signing up that is being persisted with Hive and the user login in once.

[@viz_dugz]

In current version of the plugin (0.6.0+) the countBuilder isn't present, Any solutions ? Since things are pretty much impossible without that.

[@luffyzoro7105]

How I can let the number of items to be shown in grid view based on a web admin panel ? Means whatever the admin add products it’s shown in grid view . I appreciate your help and time :)💗

[@bertmarcos1454]

nice. pls create a basic wallpaper app.

[@vishwateja266]

thanks bruh !

[@HeyFlutter]

You are welcome, vishwa teja 😊

[@vishwateja266]

@@HeyFlutter could u make another tut on gridview these methods are depricated could be a great help

[@agp1444]

thanks for video. uncomfortable width of screen but content - cool. maybe it will be helpful for someone but in my case "staggeredTileBuilder: (int index)" starts to count from index == 1. very weird

[@j.k24]

would be cool for a video, on how you change the grid per mobile or tablet.

[@HeyFlutter]

Thanks for the idea, jeroen k! 🙂 I have added it to my list of ideas for future videos!

[@AR-us1vn]

Thank you for this great explanatin ..... A question Is this package we can use it inside customscroll view ? ... I try put it inside slivertoboxadabter but i can't scroll 😅

[@HeyFlutter]

Hello, A R! Follow this link: stackoverflow.com/questions/70549115/how-to-implement-staggered-grid-view-with-slivers-in-flutter I hope it will solve your problem. Thank You 🙂

[@AR-us1vn]

@@HeyFlutter thank u so much ✨💙

[@muhammadhamadjamal681]

Thank you daddy

[@HeyFlutter]

You are welcome, Muhammad Hamad!

[@amandwivedi7413]

How we can get total number of images from Staggered grid view like we want to show Numbe of Image = X and let X be the total number ?

[@amandwivedi7413]

It is possible?

[@Trea704]

I keep trying but cannot acces this github repo. I never get an email

[@fahadmustafa650]

5:27 all those looking for dynamic height

[@iramyasin8748]

please give source code in full form

[@kaiesmabrouk7209]

i want to animate staggered grid view. I wantto show order change with animation. Is that possible with Staggered GridView ?

[@HeyFlutter]

Thank You Kaies MABROUK! Follow this link: medium.flutterdevs.com/staggered-animation-in-flutter-e7282a936b99 I hope you will get your answer 🙂

[@sankaranarayananp8407]

How to use this package on slivergrid view?

[@sankaranarayananp8407]

@@HeyFlutter actually, i know this package well, but idk how to use it on custom scroll view...i already tried but it is not working. Can you tell me how to make it work?

[@vinayreddypulagam]

👍

[@deepjyotibaishya7576]

in 2022 ? how to do this

[@roebenhood]

Why is StaggeredGridView not available now?

[@HeyFlutter]

Thank You Roeben Pierce Boyles! Follow this link: pub.dev/packages/flutter_staggered_grid_view I hope you will get your answer 🙂

[@samadshukr4111]

I can't access to source code please can you proved

[@samadshukr4111]

I have tried twice but I couldn't, please can you provide the github code of this video in the comment?

[@fahadmustafa650]

how to make such grid with dynamic width

[@HeyFlutter]

Thank You Fahad Mustafa! Follow this link: stackoverflow.com/questions/60410348/dynamic-height-for-staggeredgridview-is-not-working-in-flutter-project I hope you will get your answer 🙂

[@priyanka-uk3hr]

can I get the full code of it

[@HeyFlutter]

Thank You priyanka!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware

[@scientistwayne552]

this has changed , staggeredgridview changed . its now throwing errors

[@HeyFlutter]

Hello, Scientist Wayne! Follow this link: pub.dev/packages/flutter_staggered_grid_view, I hope it will solve your problem. Thank You 🙂