Superhero Interaction App in Flutter

Pinkesh Darji
May 31 · 5 min read
Credits: https://www.vecteezy.com/ and http://pngimg.com
Credits: https://dribbble.com/shots/5935613-Marvel-Movies-Interaction

UI structure

Screen 1:

GestureDetector(
onHorizontalDragEnd: _horizontalDragEnd,
child: ...
);
void _horizontalDragEnd(DragEndDetails details) {
if (details.primaryVelocity < 0) {
// Swiped Right to Left
//Do what you want to do.

}
}
Transform.translate(
offset: _getFlickTransformOffset(
characters.indexOf(character)),
child: ...
)
_____________________________________________________Offset _getFlickTransformOffset(int cardIndex) {
if (cardIndex == currentIndex) {
return _translationAnim.value;
}
return Offset(0.0, 0.0);
}
Transform.rotate(
angle: _getFlickRotateOffset(
characters.indexOf(character)),
origin:
Offset(0, MediaQuery.of(context).size.height),
child: ...
)
______________________________________________________________
double _getFlickRotateOffset(int cardIndex) {
if (cardIndex == currentIndex) {
return -math.pi / 2 * _rotationAnim.value;
}
return 0.0;
}
FractionalTranslation(
translation: _getStackedCardOffset(
characters.indexOf(character)),
child: ...
)
___________________________________________________________________
Offset _getStackedCardOffset(int cardIndex) {
int diff = cardIndex - currentIndex;
if (cardIndex == currentIndex + 1) {
return _moveAnim.value;
} else if (diff > 0 && diff <= 2) {
return Offset(0.0, -0.06 * diff);
} else {
return Offset(0.0, 0.0);
}
}
Transform.scale(
scale: _getStackedCardScale(
characters.indexOf(character)),
child: HeroCard()
)
____________________________________________________________________
double _getStackedCardScale(int cardIndex) {
int diff = cardIndex - currentIndex;
if (cardIndex == currentIndex) {
return 1.0;
} else if (cardIndex == currentIndex + 1) {
return _scaleAnim.value;
} else {
return (1 - (0.123 * diff.abs()));
}
}
Credits: https://giphy.com/

Wiring up Animation

AnimationController controller;
CurvedAnimation curvedAnimation;
Animation<Offset> _translationAnim;
Animation<double> _rotationAnim;
Animation<Offset> _moveAnim;
Animation<double> _scaleAnim;
____________________________________________________________controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 500),
);
curvedAnimation =
CurvedAnimation(parent: controller, curve: Curves.easeOut);

_translationAnim = Tween(begin: Offset(0.0, 0.0), end: Offset(-100.0, 0.0))
.animate(controller)
..addListener(() {
setState(() {});
});
_rotationAnim = Tween(begin: 0.0, end: 2.0).animate(controller)
..addListener(() {
setState(() {});
});
_scaleAnim = Tween(begin: 0.9, end: 1.0).animate(curvedAnimation);_moveAnim = Tween(begin: Offset(0.0, -0.06), end: Offset(0.0, 0.0))
.animate(curvedAnimation);
void _horizontalDragEnd(DragEndDetails details) {
if (details.primaryVelocity < 0) {
// Swiped Right to Left
controller.forward().whenComplete(() {
setState(() {
controller.reset();
Character character = characters.removeAt(0);
characters.add(character);
});
});
}
}

Think more, Do more with less code.

That’s it.

Get the code here

Reference

Aubergine Solutions

Among the World’s Top 50 UX Agencies. We’re a team of UX Designers and IT Engineers. We balance our madness and method. To know more about us visit www.auberginesolutions.com

Pinkesh Darji

Written by

Passionate Flutter Dev | Google Certified Associate Android Developer | Cross-platform App Dev | Kotlin Android Dev https://github.com/pinkeshdarji

Aubergine Solutions

Among the World’s Top 50 UX Agencies. We’re a team of UX Designers and IT Engineers. We balance our madness and method. To know more about us visit www.auberginesolutions.com