The Basics of Animation with Dart's Flutter Framework

What Will I Learn?

• You will learn how to animated widgets using Dart's Flutter Framework
• You will learn how animation controllers work and how to manage the state of an animation
• You will learn how to proliferate state from one class to another to decouple the state from the widgets
• You will learn about tickers, tweens, animation objects and animation listeners

Requirements

• IDEA intellij or Visual Studio Code with the Dart/Flutter Plugins
• The Dart SDK and the Flutter SDK
• A fair understanding of Mobile development and Imperative or Object Oriented Programming

Difficulty

• Intermediate

Description

In this tutorial, we talk about the basics of creating animations in Flutter. We look at the properties of the Animation Object in the flutter framework. We also look at how Animation Controllers extend the Animation Object to give the user control over how an animation works. We talk about the Tween object and how it is used to configure the range that an Animation animates over. We also look at how we can decouple our Animation State from our Widgets by using Listeners and Status Listeners.

Animations in Flutter make use of a range based on a graph system and the frame rate of the application. You also define a Duration and can use a Tween to further expand the range of the Animation. The Animation Controller allows you to directly control when the Animation triggers and in what way. We can use Status Listeners to find the status of the animation and then change it using the Animation Controller.

The source code for this project can be found here

Video Tutorial

Curriculum

• Dart Flutter Cross Platform Chat Application Tutorial
• Building a Multi-Page Application with Dart's Flutter Mobile Framework
• Making Http requests and Using Json in Dart's Flutter Framework
• Building Dynamic Lists with Streams in Dart's Flutter Framework
• Using GridView, Tabs, and Steppers in Dart's Flutter Framework
• Using Global Keys to get State and Validate Input in Dart's Flutter Framework

---

Posted on Utopian.io - Rewarding Open Source Contributors

---