Advanced Physics Based Animations in Dart's Flutter Framework
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
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @amosbastian, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!
Thank you for your hard work and thanks for moderating my content.
Being A SteemStem Member
Thanks guys.
Nice one,
but can you explain the video in written form, i'm having a hard time watching the video
Which parts are you having issues with?? The flutter mechanics or the actual mathematics behind the animations?
Sorry but i can't play the video at all
Video is on YouTube so if you are having issues playing it then you should probably do so on a different device.
Ok....Thanks
Hey @tensor I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x