Step 1: Setup the test lab

Don’t forget to declare controller as well :

Note: I am calling setState in the listener because it is less code and does the job perfectly. The other method would be to call setState every time the tab is selected or changed

Step 2: Create two floating action buttons and switch between them

Note: In this example, the number /index “1" refers to the messages page. This is the last page

Now, we need to set the index of the page whenever the user clicks a button:

Step 3: Switch using animation

The use of UniqueKey key here is necessary so that we can give each FAB a unique id. You can learn more about this here.

Step 4: Scaling Animation

Notes :

transitionBuilder is property in AnimatedSwitcher The scaling effect can be split into two phases from 1.0 to 1.2 and from 1.2 to 1.0 The scale factor 1.3 is just my guess after some tests

Step 4: Rotation animation

If you are asking for the page with index == 1, use a normal animation otherwise use a ReverseAnimation . The reverse animation consist of a tween which is shown below:

Now that we have everything working, we run into a small problem. The notification icon is rotated by -90 degree, the wrong angle.

To solve the issue let’s make the starting angle of the Icon be 90 deg. Now when the transformation happens we get the right position

Final result

Animated FAB using Flutter

Sorry about the lag in the GIF try it in your emulator or phone and you will see how smooth is it and here you can find the code for that.