Fortune Wheel with Flutter
Hi everyone, today I will share an interesting project with custom rotate animation in Flutter: Fortune Wheel.
With the original idea, I will use ClipPath to draw its Arc. Create a _LuckPath extends CustomClipper <Path>, with the angle variable supplied:
Use Transform.rotate to rotate those Arc to form a complete wheel.
Leave it all in one Stack, and you get a wheel similar to the picture below.
Okay, now we continue to use Transform.rotate and decorate them with very cool fruits.
It’s easy for us to create an “Go” button and an arrow as shown below.
The next part is the most important part: the wheel rotation function. We will with SingleTickerProviderStateMixin and create AnimationController, Animation. We will let the wheel, which we created, go to AnimatedBuilder. And define onTap event for “Go” button:
Let’s see what our results are:
It seems quite easy, we just listed the important part of the article. For a better understanding, please refer to my entire project here.
