What Will I Learn?
- You will learn how to build out Physics based Animations in Flutter
- You will learn how to use Gesture Detection for Animation
- You will learn about Custom Painters, Paths, the Canvas Object, Scroll Spring Simulation, Offsets and various other Objects from Dart and Flutter
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
- An understanding of basic Geometry and Spring Physics
Difficulty
- Advanced
Description
In this tutorial, we look at Physics Based Animation in Dart's Flutter Framework. We do this by making a box that slides up and down and stretches based on the Gestures that the user is making. We use a Gesture detector, Offsets, the ScrollSpringSimulation Object, the CustomPaint Object, the Canvas Object and the Dart UI Path Object. First, we create a Material Application that contains a Scaffold and then we embed a Padding object with a Container inside of it. We then create a Custom Stateful Widget with various properties, namely, a property that tracks where the user is pulling on the box. We then use this information to approximate how our box should react to the user's input. This approximation is not used to directly show how the box is changing but it is used to guide our CustomPainter Object.
We then embed a CustomPainter Object into a Gesture Detector Object which is rendered every frame that the box is being manipulated on. This CustomPainter Object re-renders the box based on the user input using a Canvas and a Dart Path Object. This Dart Path Object allows us to draw out how our animation will look in response to the Gestures by creating a cursor which covers the areas on the box that change. These areas are then rendered every frame to make the animation look smooth. This animation is given the properties of the ScrollSpringSimulation Physics Object which allows it to spring back and forth when the user stops inputting a Gesture.
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
- The Basics of Animation with Dart's Flutter Framework
Posted on Utopian.io - Rewarding Open Source Contributors