{"id":2564,"date":"2019-10-22T17:00:47","date_gmt":"2019-10-22T11:30:47","guid":{"rendered":"https:\/\/www.concettolabs.com\/blog\/?p=2564"},"modified":"2019-10-22T17:00:47","modified_gmt":"2019-10-22T11:30:47","slug":"it-has-never-been-easier-to-create-animations-in-flutter","status":"publish","type":"post","link":"https:\/\/websitelaravel.concettoprojects.com\/blog\/it-has-never-been-easier-to-create-animations-in-flutter\/","title":{"rendered":"It has Never Been Easier to Create Animations in Flutter"},"content":{"rendered":"

The UI of a website or an app feels intuitive if it has well-designed animations. A good animation contributes<\/span><\/a> to the look and feel of your application and improves the user experience. Flutter has good animations support which allows you to come up with cool animations. There are many widgets in Flutter. For example, the Material Widget, which comes with standard motion effects defined in their design specification.<\/p>\n

<\/span>Let\u2019s Get Started:<\/span><\/h2>\n

Let\u2019s start with a very simple rotation animation. Create a new file in Flutter and copy this code inside it.<\/p>\n

\"animations<\/p>\n

If you look at the initState() method you will see that _arroAnimationController variable is initialized at 300 milliseconds. It means the duration of the animation will be 300 milliseconds.<\/p>\n

After that _arrowAnimation is initialized with the beginning value of \u201c0.0\u201d along with the end value being set at pi (value = 180). Which means the animation will rotate at 180 degrees.<\/p>\n

Let\u2019s now talk about the layout part of the screen. Copy the code given below inside the build method:<\/p>\n

\"layout<\/p>\n

Now lets create the firstChild() widget. This is where the actual widget is present which itself contains a widget that needs to be animated and another widget that starts the animation.<\/p>\n

\"firstChild()<\/p>\n

This code is easy to understand. The first child of the row icon which needs to be animated is wrapped with the AnimatedBuilder widget.<\/p>\n

The Animated builder widget is the most commonly used widget for creating animations. Instead of calling the setState() method on each change in the value of animation, it would be effective and efficient to the AnimatedBuilder widget to create animations.<\/p>\n

<\/span>AnimatedBuilder Widget Properties used:<\/span><\/h3>\n