Implicit Flutter Animations, Episode 6: Create a Custom Page View Animation | Kodeco

🎓 Courses & Articles
1
This is a companion discussion topic for the original entry at https://www.kodeco.com/18770259-implicit-flutter-animations/lessons/6
2

why TweenAnimationBuilder`s tween begin and end is same?

itemBuilder: (context, index) {
              final offer = offers[index];
              final _scale = _selectedIndex == index ? 1.0 : 0.8;
              return TweenAnimationBuilder(
                  duration: Duration(milliseconds: 2000),
                  curve: Curves.ease,
                  tween: Tween(begin: _scale, end: _scale),
                  child: Item(offer: offer),
                  builder: (context, value, child) {
                    return Transform.scale(
                      scale: value,
                      child: child,
                    );
                  }
                  );
            },
3

At 04:07, i mentioned that the scale up and scale down is controlled by the tween’s begin and end value and both are assigned to _scale.
Now, if you take a look at how i declared _scale, you can see it can either be 1.0 or 0.8 depending if the current item in view in the selected index.

Whenever there’s a change in the selectedIndex, that is, when you slide through the pageview, the value of scale moves from 1.0 to 0.8 or the reverse (depending on the slide direction).

Remember, tweens are used for interpolating values, so a move from 1.0 to 0.8 would be 1.0, 0.9 then 0.8.
If you were going in reverse then it’ll be 0.8, 0.9 then 1.0.

So assigning both begin and end the same variable, doesn’t really mean they’ll have the same value because they can either be 1.0 or 0.8.
The tween controls the change behind the scene like I’ve explained above.

One last thing to note, builders build widget for each item based on demand. So you might be thinking that all items should have the same scale since we assigned them the same _scale. Each item is built with the same scale and only change when the item is selected, that is, when it is the main item on the screen.