Flutter Animated Container in 3 Minutes

animated container is animated version of container that gradually changes its values over a period of time let's get started for now we have this empty scaffold so we are going to create our first widget which is Center in the body after that we are going to create the animated container as child of this Center the animated container takes the duration as seconds or milliseconds do you want to learn flutter in a better and faster way then simply join our 12-week flutter training on hayflutter.com where you master all the flutter topics such as start UI design State Management Firebase clean architecture databases and so on by watching our structured courses that help you for each topic to go from a newbie until an expert level in flutter after that we are going to add the curve the curve is to apply when the animating the parameters of this container after that we are going to add the width and height for for this container so we are going to add the Box 8 and box width in the class state to change this container's color and shape you are going to add decoration and parts color and Border radius as properties of this decoration so we are going to add this color and reduce in the set of our class so now let's add functions to change this container size so we create a function with name change back size for this we are going to add random values to box width and box head so we need to add random after that we are going to add another function which is named change box color this function is going to change the color of this container when it's called so now let's keep going and add another function which is change radius this function is going to change the shape of our container all right we are going to add these buttons into bathroom navigation bar and we created a row to keep every button in a row so you are going to set the main axis alignment to a space evenly then we are going to specify the children of this row we need three buttons to change this container's color shape and size so we created three buttons the first button is going to change the color of this container the next button is going to change the shape of this container and the third button is going to change the size of this container [Music]

Channel: HeyFlutter․com

Views: 13,609

Keywords: animatedcontainer example, animatedcontainer flutter, animatedcontainer flutter widget, animatedcontainer in flutter, animatedcontainer transform, animation, animation length, flutter, flutter animated container, flutter animation, flutter animations, flutter apps, flutter tutotial, how to use animatedcontainer, quick animation, tutorial

Id: 4Qu91aAw1Hk

Length: 2min 54sec (174 seconds)

Published: Thu Jun 22 2023