Animated Gradient in Flutter

in one of our previous videos we created a gradient text and a viewer requested to create a video on animated gradient so here we are I have created a squared container with size of 300 and a linear gradient which you can see on your right side notice the begin and end properties of the gradient this defines from where the gradient will start and where it will end right now it begins from the top left corner of the container and ends at bottom right corner that is why you can see the yellow color starting from top left and red color at bottom right corner we will somehow change this begin and end points to animate the gradient first of all convert the stateless widget to State full widget then we will define an animation controller which will control our animation and also Define two animations of type alignment since we will change the alignments of the gradient inside an its State method initialize the controller and give some duration to it the error is because our state object is not ticker provider so let's add single ticker provider State mix into it to make it ticker provider now the tricky part comes we will have to create a sequence for both the alignments to make you understand the logic behind it I have created this drawing for you for the top color alignment which is yellow we will start from top left side and the end on top right then start from top right and end on bottom right and so on until we reach to the initial point so in our first sequence we will start from top left to top right we will have to call animate on this sequence so that we can assign this animation to our top alignment animation object also we will have to pass controller to the animated method to tell the sequence who will control it now our next sequence will start from top right corner to bottom right corner notice that we are starting the next sequence from the point we ended on the previous sequence and then the other two sequences to reach our initial point the weight property in each sequence defines what percentage of total animation time this sequence will take since we want to keep all sequences equal so we assign same number to it that is one now for the red color or we can say our bottom animation we will start from the bottom right corner and complete all the sequences until we reach to bottom right corner again our sequences are created now make the controller repeat the sequences infinitely the gradient is not animating because we are not passing the animated values to it wrap the container with animated Builders so that whenever the value of Animation changes the Builder are automatically rebuild our container and pass controller inside animation property and at the end pass the top animation value to the begin property and value of bottom animation to end property of the gradient and restart the app and make to sure hit the Subscribe button to get the next video [Music]

Channel: Flutter Guys

Views: 8,331

Keywords: flutter tutorial, flutter basics, flutter course, flutter 2023 course, flutter 2023 roadmap, flutter 2023 tutorial, animation in flutter, flutter animation tutorial, flutter animation ui, flutter gradient, flutter gradient color, flutter animated gradient, flutter widgets, flutter widgets tutorial, flutter tutorial for beginners, flutter tips and tricks, flutter tips, flutter animation, flutter ui, flutter gradient background

Id: rYZtFhGkRiQ

Length: 2min 28sec (148 seconds)

Published: Mon Jan 23 2023