Beautify your list with sliver

In this session, we will learn about what sliver is. After that, we have a look into ListView and GridView and learn how the technical implementation of slivers work. In the live coding session, we will implement some slivers together and at the end, we will hear about some best practices.

Transcript

1. Beautify your list with Sliver Mahtab Tadayon Flutter Hub Conference 28th January 2021
2. Mahtab Tadayon š Software Engineer at MediaMarktSaturn Retail Group š Founder & content creator of Flutter Explained š Member of Flutteristas community
3. Agenda Ø Introduction to Sliver Ø Technical implementation of Sliver Ø Live Coding Ø Best Practices
4. Sliver š A portion of a scrollable area š All scrollable Widgets using Sliver š Build lazily each item š Efficiently scrolling through large number of children
5. ListView & GridView š ListView: Scrollable list of Widget š GridView: 2D array of widgets š A ListView is a CustomScrollView with a SliverList š A GridView is a CustomScrollView with a SliverGrid
6. When to use Sliver? š Efficiently scrolling through large number of children š Have app bar with customized scroll behavior š Scroll a list of items and a grid of item all together
7. App Demo
8. CustomScrollView š Creates custom scroll effects š Parameter: š ScrollDirection š Slivers
9. CustomScrollView Code
10. SliverAppBar š Dynamic AppBar š Parameter š expandedHeight š Strech š flexibleSpace š floating
11. Sliver AppBar Code
12. SliverList š Place children along main axis š Parameter: š delegate š SliverChildListDelegate š SliverChildBuilderDelegate š childCount
13. SliverList š Place children along main axis š Parameter: š delegate š SliverChildListDelegate š SliverChildBuilderDelegate š childCount
14. SliverList
15. SliverList Code
16. SliverFixedExtentList š Alternative to SliverList š More efficient than SliverList š Parameter: š itemExtent š delegate
17. SliverFixedExtentList
18. SliverFixedExtentList Code
19. SliverGrid š Place children in two-dimensional arrangement š Parameter: š Delegate š SliverChildListDelegate š SliverChildBuilderDelegate š gridDelegate š SliverGridDelegateWithFixedCrossAxisCount š SliverGridDelegateWithMaxCrossAxisExtent
20. SliverGrid
21. SliverGrid Code
22. SliverGrid Constructors š .count š Alternative to FixedCrossAxisCount š .extend š Alternative to MaxCrossAxisExtent š No builder method only children
23. SliverGrid Constructors
24. Live Coding GitHub Repo: https://github.com/mt-tadayon/unsplash_app
25. Best Practices š Know your requirement before using Slivers š Use ListView & GridView as much as possible š For dynamic AppBars you will need a CustomScrollView and Slivers š For better performance consider using SliverFixedExtentList
26. Conclusion
27. Thank You! @mahtab_dev Flutter Explained