Instantly share code, notes, and snippets.

Embed
What would you like to do?
class _PriceTabState extends State<PriceTab> with TickerProviderStateMixin {
final List<int> _flightStops = [1, 2, 3, 4];
final double _cardHeight = 80.0;
AnimationController _dotsAnimationController;
List<Animation<double>> _dotPositions = [];
@override
void initState() {
super.initState();
_initSizeAnimations();
_initPlaneTravelAnimations();
_initDotAnimationController();
_initDotAnimations();
_planeSizeAnimationController.forward();
}
@override
void dispose() {
_planeSizeAnimationController.dispose();
_planeTravelController.dispose();
_dotsAnimationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
child: Stack(
alignment: Alignment.center,
children: <Widget>[_buildPlane()]
..addAll(_flightStops.map(_mapFlightStopToDot)),
),
);
}
Widget _mapFlightStopToDot(stop) {
int index = _flightStops.indexOf(stop);
bool isStartOrEnd = index == 0 || index == _flightStops.length-1;
Color color = isStartOrEnd ? Colors.red : Colors.green;
return AnimatedDot(
animation: _dotPositions[index],
color: color,
);
}
Widget _buildPlane() {
[..]
Container(
width: 2.0,
height: _flightStops.length*_cardHeight*0.8, // <--- changed length of trail
color: Color.fromARGB(255, 200, 200, 200),
),
[...]
}
_initSizeAnimations() {
_planeSizeAnimationController = AnimationController(
duration: const Duration(milliseconds: 340),
vsync: this,
)..addStatusListener((status) {
if (status == AnimationStatus.completed) {
Future.delayed(Duration(milliseconds: 500), () {
widget?.onPlaneFlightStart();
_planeTravelController.forward();
});
Future.delayed(Duration(milliseconds: 700), () { // <--- dots animation start
_dotsAnimationController.forward();
});
}
});
[...]
}
void _initDotAnimations() {
//what part of whole animation takes one dot travel
final double slideDurationInterval = 0.4;
//what are delays between dot animations
final double slideDelayInterval = 0.2;
//at the bottom of the screen
double startingMarginTop = widget.height;
//minimal margin from the top (where first dot will be placed)
double minMarginTop =
_minPlanePaddingTop + _planeSize + 0.5 * (0.8 * _cardHeight);
for (int i = 0; i < _flightStops.length; i++) {
final start = slideDelayInterval * i;
final end = start + slideDurationInterval;
double finalMarginTop = minMarginTop + i * (0.8 * _cardHeight);
Animation<double> animation = new Tween(
begin: startingMarginTop,
end: finalMarginTop,
).animate(
new CurvedAnimation(
parent: _dotsAnimationController,
curve: new Interval(start, end, curve: Curves.easeOut),
),
);
_dotPositions.add(animation);
}
}
void _initDotAnimationController() {
_dotsAnimationController = new AnimationController(
vsync: this, duration: Duration(milliseconds: 500));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment