Animated Pull to Refresh in Flutter | Flutter Animation

in the world where there are millions of app company for users attention a secret ingredient that can help is the attention to the small details that designers give which usually be as developers don't one of them as you might have guessed is tool to refresh and by the end of this video you will be able to add this awesome animated full to refresh effect into your own app making its user experience super interactive well there are many places where you can find custom animations but ripe and motif files are the most popular ones in the flutter community which have a number of pre-built animations and as for this tutorial we will be using this amazing drive animation by jc tone to download this animation just click on download and while saving remove this number just to make the name a bit shorter then add custom refresh indicator and write dependency in our pubspec.yml file and also add the path to drive animation inside the asset section which as you can see i have added inside an acid folder then add custom refresh indicator inside scaffold body give a dummy list as its child which i have already created and it is just a list of container with text in it then we will add an on refresh callback where we can make an api call or do any asynchronous tasks but for now we will just add a delay of 3 seconds then comes the offset to arm property which is the number of pixels a user need to drag in order to change the state from idle to arm which indeed invoke the on refresh callback then create a new offset to arm variable and for its value make sure not to pass a large value i find 200 to 250 as a sweet spot so let's go with 220 and then pass that variable to offset to arm then add the builder method which takes context child which is our dummy list widget and controller which is of type indicator controller which contains all the information related to the scrolling state as in this demo app we will see all the properties of indicator controller as we start to drag we can see the value start to increment and the state changes from idle to dragging then we reach to the armed length here we can see that the value start to exceed 1 and the state changes from dragging to armed then inside builder method add animation builder to animate the indicator widget it contains animation controller child and builder method which will contain the drive animation so to create that animation add a stack widget inside its children add drive animation dot asset and inside it give the path to drive animation which in my case is inside acid folder and make the feed to box fit dot cover and wrap it inside a size box with a width of double dot infinity and height of offset to arm into control dot value this will give it that scale effect as we scroll below it add transform the translate widget and give it an offset of 0 on x and offset to arm into control.value on y which is same as the size box height because we want to translate this widget which is the dummy list down on the y axis as we scroll and finally inside child i had a simple check that if the controller is loading then show the loading list else show the child widget and with that we have achieved this amazing animation within few minutes thank you for watching until the end and let me know your thoughts on this in the comment section or any topic on which you like to see a video in future [Music]

Channel: Flutter UI Dev

Views: 5,388

Keywords: Flutter, Animation, Pull to refresh, Refresh Indicator, How To, Animated Pull to refresh, Animated Refresh Indicator

Id: FUqiWfHTo0Y

Length: 3min 58sec (238 seconds)

Published: Sat Feb 12 2022