Instagram Clone 2021 - Explore Page - Flutter UI - Speed Code - Ep.2

In this second video of Instagram clone series we build the explore page UI. Within the explore page we build three main components: a custom sliver app bar containing search bar, a sliver persistent header displaying list of categories, and a staggered grid feed containing images. 1) The custom app bar displays the search bar where users can type using the device keyboard 2) Sliver Persistent header displays the list of categories that scrolls horizontally. Persistent header stays pinned on the top even when the user scroll through the images grid 3) Lastly, the Slivered Staggered Grid is the heart of explore page as it displays the images posted by different users in different sized boxes based on certain conditions. KEY LEARNING OBJECTIVES: - Using different widgets such as SafeArea, ListView, TextField, Image and many more - Using Sliver Persistent Header - Building Slivered Staggered Grid as in instagram app 3RD PARTY PACKAGES USED: flutter_staggered_grid_viewt: https://pub.dev/packages/flutter_staggered_grid_view PREVIOUS VIDEO: Home Page: /watch/4l6iK8GTOL2Ti NEXT VIDEO: Reels Page: /watch/QTge8ITm9Yime VIDEO CONTENT: 0:00 Introduction 00:10 Search bar 02:03 Category list 05:31 Staggered Grid 08:10 Finished explore page CONTACT: Instagram 📸 - https://instagram.com/stackedlist Website 🌍 - https://stackedlist.com Email ✉️ - hello@stackedlist.com Thank you for watching! If you enjoyed this video, please like and subscribe. #flutter #ui #flutterui #fluttercoding #flutterinstagram #dart #stackedlist #speedcode

الفئة