This will download a file named “shopping_bag.flr” Save as binary and leave other settings as default. The final step is to export our animated icon using the export button. At this point, you can press the play button and see the icon animate already.Ĭhange rotation value and move the scrubber forwardĦ. First, we will increase the value of rotation from 0 to 25 degrees, then we will bring it back to 0 by reducing 5 degrees in each step, then we will increase rotation value in the negative direction from 0 to -25 degrees and finally bring it back to 0. We will repeat step no 5 by moving the scrubber a bit in each step. Set the rotation value to 5 degrees (or whatever you like). Make sure the “AUTOKEY” option is selected.ĥ.

This name is important because you will use this name in the flutter code to animate the icon (we will get there later).Ĥ. Click on the ‘+’ icon on the bottom to create a new animation and name it “add_cart”.This will reveal the corresponding properties on the right side of the flare design tool. Expand the artboard and select the SVG icon imported.All you have to do is move the scrubber and change the rotate value, the animation will be recorded automatically. I am going to focus on this approach in this article because this way, we will be able to use SVG on the flutter web platform (obviously along with android and iOS platforms) and this will also help us in creating our cool custom animated icons which can be animated using a controller.Īfter switching to the animate mode, you can move immediately to create the animation which is very easy. Using Flare design tool and flare_flutter plugin.This plugin, however, does not support the web platform. This plugin does the heavy lifting for you and renders SVG from assets and network with minimum effort. This, however, can be achieved in the following two ways: You heard it right “minimum effort” because that is what we want to do while focussing on the business logic of our application.Ĭurrently, there is no direct way to render SVG in flutter as it is not supported by flutter natively. Creating custom animated icons and interacting with them in flutter (android, iOS, and web).Using SVG illustrations, icons, and other resources in flutter (android, iOS, and web).

Download animated svg