blog.md

Twitter Animated FAB : How To do it in Flutter

Most of the time when you try to learn somthink new quily you just go to pratcle and in mobile developmnt we ofen try to replicate common UI and fetures from popular apps so in the next series of article i will try to do somthing similar to help you getting started quiqly.

What we are trying to build

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

//add twitter aniamted fab

What's this

If you look to the animation for few minutes you will relise that it's just a composiotn of smaller simple aniamtions: 1.Rotate the widget by 90 degre and invers it 2.Scale the FAB and go back to normal scale

How i'm gonna do it

We can achive the same effect with a lot of ways but i will go with an easy and simple one using AnimatedSwitcher just becuase i think the FAB continet here is switching between a list of states. And in the our example we only have two states :write a twitt or send a message

Step 1 : Setup the test lab

https://gist.github.com/326b1da4e53a67589316afd75fb04ce3

And don't forget to declare the controlloer as well :

https://gist.github.com/cd5a811c79c28692b16c66e50574844d

NOTE : i am calling setState in the lisnter just becuase it's less code and does the job perfeclyotherwise you have to call setState everytime you change the selected tab manually

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

https://gist.github.com/3d664f3a7d2c75d36c85bc78100a31f6

Note: in this example the number 1 refer to the last page and you can think of it as the notification page in twitter

Step 3 : Switch using aniamtion

https://gist.github.com/fc9cab83638854fc6e28df64e3d0d18b

Note : the use of UniqueKey key here is nesseary so that we can give each FAB a uniqe key and you can know more about that in ths article

Step 4 : Scaling Animation

https://gist.github.com/bb4e9fdfbba3a85742268828d44d5af1

Notes : 1.transitionBuilder is property in AnimatedSwitcher 2.The scalling effect can be splitted 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 : Roation animation

https://gist.github.com/ff939cbb0f5979d2d6ecdbe1a40cc204

If you are asking for the page with index 1 (notifications page) use a normal animation otherwise use a ReverseAnimation and by talking about animation here is the declration for angle:

https://gist.github.com/4d815cf4b6921f70328a7cc8ce1391f9

Now we have everything working finally but just one problem, the icon in the notification page FAB is rotated by -90 degree and to solve the issue let's make the Icon by defualt rotated by 90 so when the transformation happens we get the right position

Final result

//add image of final result