Flutter Animated Infinite Slider - No Package

guess what you can totally build this awesome slider in flatter without using a single package but hold on that do the start after we nail the slider I'm going to show you how you can make this cool scrolling effect then we are going to create this awesome 3D curs look at this it looks so good and we'll wrap our animation adventures with this cool custom page transition in this episode I'm going to teach you how how you can create this slider if you want to code along with me grab the starting project from GitHub after you've run it it should look like this all the images and icons are stored in the assess directory now let's move to the lip directory where we have two main folders core and features inside the features you'll find home and magazine detail Pages what you are seeing here is the preview of of the homepage which is made up of simple UI users this is where we are going to implement our slider let's get rid of the Todo commment replace the spacer Wiz IT with an expended Wizard and for his child use magazine cover image this WI a needed magazine for which pass the first item from fake magazines the magazine cover image is a straightforward wi it that return return an image with an aspect ratio of 0.75 let me show you the fake magazines list we have 13 items here and the great news is all of those included in the starting code so that we can focus on our animation for our final result we want one magazine cover on the left another on the right and the main one on the top to achieve this wrap our magazine cover image in a transform wizard to move the cover on the left we said it offsite to - 70 and 30 however it's smaller than a main one so we adjust it it's scale to 0.6 the last adjustment we need is rotation by setting the rotation angle to Pi do 0.1 oops it rotate the wrong way simply add a minus sign before the angle will correct the direction pi. 0.1 means it rotate by 18° and now let's add other images to match what we have in our final preview wrap the transform the translate with a column then swipe that column for a stack next in the stacks should we're going to use list generator to crack out our items set the length to four I will explain why in a moment change the index to stack index for better clear it next to make our code more organized and reusable we're going to extract this whole setup and name it infinite dragable slider copy all that code and under the wizard folder create a new file infinite dragable slider dot dot paste it all in there and fix any missing inputs back to the homepage import this infinite dragable slider to clear out any errors convert this to a stateful wizard because here we need to mention our animation controller and others we're going to need three parameters item Builder allow us to pass in all the items we want to slide item counter tell us how many there are and index determine the current item to display while item Builder and item counter are essential index is optional and default to zero back to the homepage set item count to the length of our fake magazines for item Builder pass the magazine cover image now back to to the slider and onch pass the item Builder with context and stack index that identify which one we need to render refactoring done but now all the covers are stacked one to another let's fix that to sort out the stacking is should create a function that calculates the offset for each item based on its stack index I'll name this function get offset and it will take a stack index as its parameter the logic goes like that if the stack index is zero then we'll use an offset ofus 70 and 30 or make sure it stack index got a little typo if it returns now then the default offset is zero and zero for stack index of one the offset is 70 and 30 then in the slider we replace the hardcoded offset with this get offset function it might look a bit odd initially don't worry we'll fix it later if we had only one item it shows perfectly then if two the offset is perfect the rest is not that's why it looks bit weird the third one shows on the center but we set the length to four that's why the last one shows on top of that one the question is why because I made a mistake initially the first offset should be zero and 30 for the next one it should be my - 70 and 30 and for the third one it's going to be 70 and 30 let's go over this again we'll set the Lan to one the first one shows perfectly when we have two items one shows up on the left and when there are three the third one appears on the right the fourth one will be right in the center because we say the default offsite to zero you might wonder why for h a user could add 10 20 even 100 magazine card well the answer is all about making our app work smoother and faster by setting the length to four we are using a trick called lazy Ling that means we only load the next four magazine cars as needed it gives a great performance boost especially when we have a lot of course right now all the magazines are roted at the same angle but that's not what we want we want each magazine to rotate at a different angle so we're going to create a new function named get angle and this function required a stack index to work now if the index is zero then the angle will be zero at index one we want it to rotate by minus 18° since we use 18° a lot we have made it a variable and mention it here let's F the stack index and if it returns not will just make the angle zero still it looks broken but if there's only one magazine then it looks exactly what we want for the next one it should rotate in the opposite direction to make it we just add minor sign to the angle now we haven't set a specific angle for the third magazine yet for the third one we use our default 18° angle and that's exactly what we want and the last one is at the perfect angle the default angle is zero and we want zero here right now all the magazine cover look very small that's because we have set their scale value to 0.6 which is almost half up their actual size let's fix this by creating new function this time we'll call it get scale here's how it should work if the index is zero then the scale should be 0.6 for index one make it 0.9 and for index two let's go with 0.95 if it's anything else we'll use the default scale which is one after we add this function to our scale things are looking closer to what we want now the cover feels a bit too big to adjust this let's go back to our home with it and TW the height a bit more both here and there now with those adjustments everything looks just right next we need to add a drag picture when you drag it to the left or right it will shift to the next magazine and if you drag it the other way it ships back to its original position we want to make our slide app changes by dragging them left or right to do this first we need to create a new file under our wizard folder called dragable wizard. dirt inside this file let's create a stateful wizard we'll call it dragable wizard we also need an inam to understand if the slide is moving left or right for our dragable wizard we are going to need few things a child wi it to display a way to figure out which direction the slide is going with on slide out a function for H is pressed and finally a flag call is enable drag to control if dragging is allowed you'll see soon why we need each of those next replace the placeholder Wiz it with the jester detector this lets us detect dragging motion on the child with pass to it then in our infinite dragable slider we're going to replace the child with our new dragable is it on his child pass it also just want to drag the top one that's why if the stack index hisory is dragable let's back to our dragable Wizard and add few more things first we need an animation controller let's call it restore controller this will be important for moving our wizard back to it starting position later on also we are going to need a wizard key and start offset the default is zero the pan offset is another keyo is what allow us to actually move the card we'll also set the size and angle to zero for now since we are using an animation controller it's important to add single tier provider State mixing to our class in the in State method we'll set up our restore animation and not to forget to dispose it properly when the wizard is no longer needed on and start store the position to the start offet now if you try it out you'll notice it doesn't move it here's the trick to make that happen we wrap our child with a transform wizard set is offset to pan offset now on pen update we update pen offset by subtracting the current position from the start offset and just like that you can move the cover whever you want this is exactly what we are looking [Music] [Music] [Music] for [Music] [Music] oh [Music] [Music] [Music] [Music] [Applause] [Music] [Music] [Applause] [Music] oh [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Applause] [Music]

Channel: The Flutter Way

Views: 10,340

Keywords: flutter, Android App, iOS app, mobile app, UI speed code, flutter app design, flutter responsive ui

Id: u3Mm5Ic-7LM

Length: 25min 29sec (1529 seconds)

Published: Tue Mar 12 2024