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.
We will try to re-create the Animated FAB in this page
//add twitter aniamted fab
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
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
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
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
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
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
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
//add image of final result