Animated Circular FAB Menu with Flutter

Image for post
Image for post

One of the most appealing thing about Flutter, which attracts most beginners and developers in general, is that it allows to create complex animations with ease. Especially in case of Android, where you would have to scratch your head hard, constantly switching between XML Layouts and Native Java Code, to create complex fluid animations, Flutter lets you do the same thing with just a few lines of code 💙.

In this read, We will be creating a Circular Animated Menu, which will pop open in a nice and fluid way, when the Floating Action Button is clicked and reverts back the same way. You can see the target example, down here…

Here, we will not be using the “floatingActionButton” property of Scaffold, to add Floating Action Button to our app. Instead we will be creating a Custom Stateful Widget called CircularButton and will which looks something like this…

We need to position this at the bottom-right corner of Screen using Stack and Positioned Widget. Now, as we don’t need only a single button, we won’t directly be adding this CircularButton as a child to Positioned. Insted, we will add a Stack to Positioned widget , so that all the CircularButtons are overlapped in Stack. At this point Screen Widget (MyHomePage) will look something like this:

And our App will look something like the screen on the right hand side, in the image below:

In the screen on right side of above Image, all the 3 buttons are stacked behind the main button. And, we want all these buttons to translate/move at the angles shown in the screen on left side of Above Image. For this, we will have to wrap each and of the 3 buttons, except the Main Button with a Transform.translate()”. This widget requires an offset property for which we will be using “Offset.fromDirection(direction, distance)” . This will allow us to move the child widget to the respective Transform in a particular direction at a given angle given in Radians. You can easily convert degrees to radians by using the function:

We will be using this function frequently…. Now, other than translation, we also want to scale and rotate our buttons, as they move out of the main button. and scale down as they move back in. For this we will have to wrap the all the 3 buttons with a basic Transform widget where we will be passing in the Matrix4 with rotation and scale values.

We will also be wrapping the Main Floating Action Button with Transform but unlike other 3 buttons, we will only be passing a “Matrix4.rotationZ ()” to it as a value of transform property. At this point our build function will look something like this:

In this code, you can see that we have passed “degOneTranslationAnimation” (Animation Object) to pass value to Transform.translate and scale of Matrix4. This will help us animate the value from 0.0 to 100 for translate and 0.0 to 1.0 for scale. We also have to initialize the Animation and related AnimationController as below:

Here, we are using the Tween from 0.0 to 1.0 , we will be using its raw value for Scale , but for Translation we will have to multiply this by 100 or any other relevant factor to get the translation value.

At this point, if you run the app, the results will look something like:

This looks cool,no doubt but it lacks the fluidness which we have in our target animation. To add fluidity to this animation we will have to create a separate animation instance for all the three menu buttons.

The required fluidity cannot be achieved by a simple tween so insted , we will have to use “TweenSequence”. TweenSequence is easy to use, and we need to pass a list of TweenSequenceItems to it. Our new Animation Initializations will look something like the code below:

You can see that we have passed different values to TweenSequence of all the three animations. This is because each of the button has to have some delay to add fluidity to animation. The magic happends with the “weight” that we are passing here. Weight basically represents the time that a particular tween should take.

By passing the values like this, animation for Button at 270 degree will complete fast, 225 degree will finish after that and 180 degree will finish last. Even the scale of these buttons will get affected by these tween values.

Once everything is done. Our final code will look something like this:

All Done, ✌. Isn’t this amazing! …🤓 With just a few Animation Tricks, we have created a relatively complex animation in Flutter. If you want to watch this in a video format, for a better undertanding of what is happening, you can check out the Video Tutorial for this article here:

Git:

As this is my first article, hope you find this undertandable and easy to follow! Suggestions are welcome ✌😁

Note: There is currently a reported but with Transform Widget that it does not translate the gesture detection region along with the button.But this tutorial will help you in learning the fundamentals of doing such cool animations. Once the fix there is, i will update the code on github and put the same updates in the article. Thank you!

Mobile Application and Web Developer | @Youtube Content Creator | Worship #reactjs #flutter #java #dart | youtube.com/retroportalstudio

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store