Animated Toggle Drawer
So Let,s look at what we are going to build today in Flutter.
So let's look at our code.
If you want to know more about animation you can refer to some of my previous articles.
Our point of importance is two snippets of code below.
from lines 86–89
// first //FractionalTranslation(translation: Offset(1.0 - _animatedController.value, 0.0),child: child,);
and from lines 106–109
// second //Transform.translate(offset: Offset(_animatedController.value * 200, 0.0),child: child,);
the second implementation was the first when I was able to achieve this and the first implementation was just trial and error which took a while but finally was able to do the job.
Our first implementation works with the Offset on the value of percent, which means (0.0, 0.0) is a translation with 0 offsets with both on the x and y-axis, and (1.0, 0.0) means a full available x coordinate on-screen. In our equation for the x-axis co-ordinate, we subtract 1.0 from the animation value, we know our animation controller value ranges from 0.0–1.0 as at the beginning of our animation starts from 0.0, So for x in our offset, 1.0 - 0.0 = 1.0 which results in full offset from the x-axis while y has no effect ( our Drawer is closed).
Now let's see our second implementation.
So here in our Transform.translate applies an absolute offset translation transformation instead of an offset scaled to the child.
So, at last, experiment yourself by giving the same value to y co-ordinate and see some extra effects in both of your implementations.
And now in our next article, we are going to handle our craft by clipping some widgets with animation until then keep practicing.
