Twitter Animated FAB: “How To Do It In Flutter”

Most of the time when you’re in a rush to learn something, the best thing to do is practice. In the world of mobile development, a common way to practice is to try to replicate features and UI from popular apps.

In this series of article, I will be doing just that.

What we are trying to build today

We will try to re-create the Animated FAB in this page

Animated FAB from Twitter App

What’s this

If you look at the animation for a few minutes you will realize that it’s just a composition of smaller simple animations:

1. Rotate the widget by 90 degrees and inverse it
2. Scale the FAB and go back to normal scale

How are we going to do it?

This effect can be achieved using many different techniques but we will keep it simple and use AnimatedSwitcher, building off my previous article. If we look closely at the animation, it almost looks like the content of the FAB is switching between a list of states.

For our example, we will only have two states:

1. Compose a Tweet
2. Send a message

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 :

1. transitionBuilder is property in AnimatedSwitcher
2. The scaling effect can be split into two phases from 1.0 to 1.2 and from 1.2 to 1.0
3. 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.

Conclusion

This is just the first article in a series of articles I am planning to write. If you enjoyed it and would like to see more, be sure to follow Flutter Community and myself on Twitter.

Raouf Rahiche (@raoufrahiche) | Twitter

Flutter Community (@FlutterComm) | Twitter