We’ll get the renderObject of our widget and use the global position provided by the tap info to convert to a local position. Remember what I said about RenderObjects above. We’ll convert that to local first and perform our operations using the new position. TapInfo will give us the global tap position. For this we’ll change onTap to onTapUp and add our parameter tapInfo into the callback. Since we’re on mobile and finger sizes matter for accuracy we’ll do general areas instead of very precise ones.įirst we need to get our touch positions. The way we’ll calculate which area of the animation was touched is by using some simple if statements within our GestureDetector. Refactors done! Now onto the juicy parts. import 'package:flare_flutter/flare_actor.dart'. Replace the Center and the Text widget with a FlareActor and give it the complete path to the button-animation.flr file. Here we will import our FlareActor which will play our animation. Lets see just how much better this will be for managing animations in Flutter. Make sure your indentation is correct in the yaml file if there’s any errors. uses-material-design : true # To add assets to your application, add an assets section, like this: assets : - button -animation.flrĪnd that’s all we need for setting up. flutter : # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. # Use with the CupertinoIcons class for iOS style icons. # The following adds the Cupertino Icons font to your application. Head over to pubspec, uncomment the assets section and add in the animation file. All you have to do is add it to the pubspec. Perform a packages get, saving the file will also do this.Īdd our asset: The animation file is already exported and in the repo under the assets folder. Let’s start by adding in the package and getting our animation file into the project.Īdd flutter_flare: Go to your pubspec.yaml file and under the cupertino_icons import add flare_flutter: any. If you’d like to follow along you can clone the code, open the flutter-flare folder and drag the start folder into Visual Code and you’re ready to go. If you want me to share how I built the animation please leave a response letting me know and that will be my next tutorial. I won’t be covering the building of the actual animation in this tutorial just using it and managing the states and interactions with it in code. This is an experiment to improve on general animation code and I would love to hear your feedback. Lets instead take a different approach using Flare from 2Dimensions and smart gesture recognition. This produces quite a bit of boilerplate code (as you see this code for a simple transform animation). You need to keep track of your AnimationController as well as your Animation (not saying it’s bad, but it’s also not great). You have to extend your state class with a TickerProviderStateMixin. There’s a few things you have to do to perform basic animations in Flutter. When it comes to animations in Flutter I would say it’s one of the sections where it lacks sophistication (in my opinion). Ever wondered how you would build those super fancy animations that you see on design sites.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |