Flutter - Snapping Effect In Horizontal & Vertical Listview | Snapping Effect In List view [2022]

[Music] hey guys welcome to effortless code learning i hope you are doing well in this video let's learn how to add snapping effect in horizontal and vertical list view so make sure to watch the video till the end now let's begin with blank proto project to add snapping effect in list view i will be using scroll snap list package i have already added its dependency in my prospect.ml file now let's make changes in main.dart file so here i will be adding scroll snap list widget inside this size box as here you can see it has four mandatory properties item builder atom count item size and one atom focus property as this list view will need data i have already prepared here this product list here i have already added these products using product class this product class is defined inside this product dot dot file this product class has four properties image path is for product image it is for title this is for product cost and this is review count on product inside this product list i have added multiple products now let's use this product list for this snapping list here for this product count let's set the product list down for this item size either we can specify width or height of the item for horizontal list it can be width of the atom and for the vertical list it can be height of the atom as we will be showing horizontal list first so i will mention listview atom width here and let's set the callback handler for this on atomfocus property now let's write function to create listview atom and it will have two parameters build context and index here let's use size box with width 150 and height 300 inside the size box let's add card let's set elevation for this card inside this card let's set clip our request i will set border radius for circular borders inside this clip iraq widget i will add column widget inside this column widget i will add image widget using image.asset method as i want to show these images from asset first of all let's get the product from product list here from product i will get the product image i have already added this product image inside this asset folder and let's use this images to show here in list view below this image widget let's set text widget to show title of product let's set point size for this let's set size box widget here for the spacing below this title let's show cost and product review so for that let's set a row widget inside this row widget i will be adding text widget to show cost then let's set text widget to show review now our function to create listview item is ready let's call this function from item builder here you can see this product list is displayed on the screen but the cost and review is not properly aligned so let's add alignment for them also change style of this cost and product review here you can see style of this cost and product review change now let's start padding for this cost and product review so i will be wrapping this row widget inside padding widget as here you can see these images are not properly aligned so let's set height and width for image widget now it is properly showing it is just like normal list view without any animation now to add snapping effect we need to enable another property in scroll snap list widget here you can see the center item size is scaled and it is showing with animation so our horizontal list with snapping effect is ready now let's add snapping effect for vertical list to show snapping effect in vertical list i will be using same widget and inside this closed snap list widget i will set scroll direction to vertical by default this whole direction is horizontal that's why we don't need to set it for horizontal list as i already told for this item size this need to be set equal to height of the list item so here this list item height is 300 but for this list i have set height for the size box so let's increase this height so here you can see this snapping effect is applied for this vertical list that's all for this video i hope this video was really helpful like this if you really enjoyed watching do consider subscribing my channel and don't forget to hit the bell button to get further notification on new videos now you can join me on instagram also i will see you in my next video until next time stay tuned and thanks for watching the video you

Channel: Effortless Code Learning

Views: 11,695

Keywords: flutter, flutter tutorial for beginners, flutter tutorial, effortless code learning, flutter widgets, flutter ui, flutter course, flutter snapping listview, flutter snapping effect listview, snapping effect listview flutter, flutter snapping, flutter horizontal listview, scroll snap list, scroll_snap_list, Flutter Horizontal Listview with Snap Effect, flutter snapping effect, flutter horizontal list, flutter listview, flutter vertical list, flutter snapping card

Id: NmAjldCTQ8I

Length: 8min 7sec (487 seconds)

Published: Tue Jun 07 2022