Skip to content

Instantly share code, notes, and snippets.

@Afonsocraposo

Afonsocraposo/main.dart Secret

Last active Aug 11, 2019
Embed
What would you like to do?
Initiate
...
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
// TickerProviderStateMixin allows the fade out/fade in animation when changing the active button
// this will control the button clicks and tab changing
TabController _controller;
// this will control the animation when a button changes from an off state to an on state
AnimationController _animationControllerOn;
// this will control the animation when a button changes from an on state to an off state
AnimationController _animationControllerOff;
// this will give the background color values of a button when it changes to an on state
Animation _colorTweenBackgroundOn;
Animation _colorTweenBackgroundOff;
// this will give the foreground color values of a button when it changes to an on state
Animation _colorTweenForegroundOn;
Animation _colorTweenForegroundOff;
// when swiping, the _controller.index value only changes after the animation, therefore, we need this to trigger the animations and save the current index
int _currentIndex = 0;
// saves the previous active tab
int _prevControllerIndex = 0;
// saves the value of the tab animation. For example, if one is between the 1st and the 2nd tab, this value will be 0.5
double _aniValue = 0.0;
// saves the previous value of the tab animation. It's used to figure the direction of the animation
double _prevAniValue = 0.0;
// these will be our tab icons. You can use whatever you like for the content of your buttons
List _icons = [
Icons.star,
Icons.whatshot,
Icons.call,
Icons.contacts,
Icons.email,
Icons.donut_large
];
// active button's foreground color
Color _foregroundOn = Colors.white;
Color _foregroundOff = Colors.black;
// active button's background color
Color _backgroundOn = Colors.blue;
Color _backgroundOff = Colors.grey[300];
// scroll controller for the TabBar
ScrollController _scrollController = new ScrollController();
// this will save the keys for each Tab in the Tab Bar, so we can retrieve their position and size for the scroll controller
List _keys = [];
// regist if the the button was tapped
bool _buttonTap = false;
@override
void initState() {
super.initState();
for (int index = 0; index < _icons.length; index++) {
// create a GlobalKey for each Tab
_keys.add(new GlobalKey());
}
// this creates the controller with 6 tabs (in our case)
_controller = TabController(vsync: this, length: _icons.length);
// this will execute the function every time there's a swipe animation
_controller.animation.addListener(_handleTabAnimation);
// this will execute the function every time the _controller.index value changes
_controller.addListener(_handleTabChange);
_animationControllerOff =
AnimationController(vsync: this, duration: Duration(milliseconds: 75));
// so the inactive buttons start in their "final" state (color)
_animationControllerOff.value = 1.0;
_colorTweenBackgroundOff =
ColorTween(begin: _backgroundOn, end: _backgroundOff)
.animate(_animationControllerOff);
_colorTweenForegroundOff =
ColorTween(begin: _foregroundOn, end: _foregroundOff)
.animate(_animationControllerOff);
_animationControllerOn =
AnimationController(vsync: this, duration: Duration(milliseconds: 150));
// so the inactive buttons start in their "final" state (color)
_animationControllerOn.value = 1.0;
_colorTweenBackgroundOn =
ColorTween(begin: _backgroundOff, end: _backgroundOn)
.animate(_animationControllerOn);
_colorTweenForegroundOn =
ColorTween(begin: _foregroundOff, end: _foregroundOn)
.animate(_animationControllerOn);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
...
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment