Flutter Swipeable button view animation | Scale animation with Navigation in Flutter | Animations

foreign [Music] and as you can see here upon successful swipe it is going to take us to the next page with a simple animation over the navigation and here in the next page we have set the background color which is in sync with the button color and the second page is going to have only one Lottie animation which is placed right at the center nothing much okay so this is basically what this viable button view is going to do they have a nice looking swiper button view which on successful swipe is going to navigate us to the second page so this is basically what we are about to discuss in this video hence without any further delay let's directly dive into the video and get started now before getting started we need to add three differences in our perspect therefore let's head over to the perspect of omr file and here inside this file try adding these three dependencies one is the page transition second is going to be the Loyalty which will help us implement the Lottie animation in our trap and third is going to be the swiper button view so make sure you add these three dependencies and also check for the latest version now after adding these three dependencies in your perspect let's head over to the main enter that file here in the main data file we have the home pointing to home page and the home page is nothing but a stateful widget class with an empty scaffold let's start building up the uis first let's create a Boolean variable called is finish which will keep track of the circle button view actions and here is here is scaffold wherein say the body we have as few spacing followed by the center we Define the swipe out button view so this widget we get as a result of installing the package and this Viper button view widget is going to accept few parameters including the required as well as the optional parameters starting with the first parameter which is going to be the button text basically the text which you want to be placed inside the button I have specified it as slide to pay and if you need it you can also customize the button text style here I have specified the font size is 25 and set the color as white followed by which we have the on waiting process callback which is basically the amount of time which is going to elapse between the navigation here I have made use of the future.delete method where I have specified the delay as 2 seconds only after the delay of 2 seconds it is going to take us to the next page until then we will see the circular progress indicator far by which we have the is finished parameter where we specify the is finished as the variable which you already defined so after delay of two seconds we will toggle the is finished variable as true so this will set us true and once it is set as true it will call this function which is on finish here and say the on finish callback function we will specify the navigation which typically takes us to the second page here as it is the confirmation page followed by the navigation we try to reset the is finished Boolean variable with this it will be able to create a swipe button view now let's start by creating this conformational page here in order to create controller we need to make use the ticket provided State mix in followed by which let's start by creating the animation controller and inside the init State let's try to inspace the controller and similarly in the disposed State let's try to dispose the animation controller here I will say this careful let's specify the background color as the some kind of green shade which is more likely in synchronous with the button color forward by which at the body we have a center widget let's make use the lottie.asset method which we get as a result of installing the Lottie package in the perspect and we need to pass in the relative path of the asset I have added a lot animation here inside the assets slash images folder so I have specified the same over here inside the relative path as well and we need to specify the controller which we already initialized at the very top follow a few other arguments we need to also customize the unloaded callback where we make use of the animation controller forward method to trigger the animation okay so this is basically what the second page of the confirmation page will look like upon successful navigation so basically this is how you can create a swipe all button view with help of this wipeable button view package so the upper successful swipe it is going to load the circular progress indicator for two seconds and after which it is going to make sure the on finish callback which takes us directly to the confirmation page and the confirmation page we have a single lot animation which is placed right at the center hope you guys found this video useful if you do so consider subscribing and I will see you again in the next one foreign [Music]

Channel: vijaycreations

Views: 4,826

Keywords: flutter, swipeable button view, package, flutter animations, animations with flutter, flutter animation tutorials, flutter animation example, flutter packages, flutter animation app, how to add animations in flutter, adding animation to flutter apps, flutter app animation example, adding animations in flutter apps, vijaycreations, how to animate screens during navigation in flutter, flutter page navigation animations, navigation animations in flutter, flutter nav animations, app ui

Id: Ku46hIiGstk

Length: 4min 59sec (299 seconds)

Published: Fri Jul 14 2023