j3g
/
f_card_swiper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(code): improve code legibility

This commit is contained in:
Ricardo Dalarme 2023-01-12 21:08:47 -03:00
parent bb0fc895e0
commit fa9f2a312f
1 changed files with 117 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
lib/stacked_cards.dart
View File

@ -12,7 +12,7 @@ const List<Alignment> cardsAlign = [
Alignment(0.0, 0.8), Alignment(0.0, 0.8),
Alignment(0.0, 0.0) Alignment(0.0, 0.0)
]; ];
List<Size> cardsSize = List.filled(3, const Size(1, 1)); final List<Size> cardsSize = List.filled(3, const Size(1, 1));
class SwipeableCardsSection extends StatefulWidget { class SwipeableCardsSection extends StatefulWidget {
final SwipeableCardSectionController? cardController; final SwipeableCardSectionController? cardController;
@ -46,12 +46,18 @@ class SwipeableCardsSection extends StatefulWidget {
this.enableSwipeUp = true, this.enableSwipeUp = true,
this.enableSwipeDown = true, this.enableSwipeDown = true,
}) : super(key: key) { }) : super(key: key) {
cardsSize[0] = Size(MediaQuery.of(context).size.width * cardWidthTopMul, cardsSize[0] = Size(
MediaQuery.of(context).size.height * cardHeightTopMul); MediaQuery.of(context).size.width * cardWidthTopMul,
cardsSize[1] = Size(MediaQuery.of(context).size.width * cardWidthMiddleMul, MediaQuery.of(context).size.height * cardHeightTopMul,
MediaQuery.of(context).size.height * cardHeightMiddleMul); );
cardsSize[2] = Size(MediaQuery.of(context).size.width * cardWidthBottomMul, cardsSize[1] = Size(
MediaQuery.of(context).size.height * cardHeightBottomMul); MediaQuery.of(context).size.width * cardWidthMiddleMul,
MediaQuery.of(context).size.height * cardHeightMiddleMul,
);
cardsSize[2] = Size(
MediaQuery.of(context).size.width * cardWidthBottomMul,
MediaQuery.of(context).size.height * cardHeightBottomMul,
);
} }
@override @override
@ -130,7 +136,9 @@ class _CardsSectionState extends State<SwipeableCardsSection>
// Init the animation controller // Init the animation controller
_controller = AnimationController( _controller = AnimationController(
duration: const Duration(milliseconds: 700), vsync: this); duration: const Duration(milliseconds: 700),
vsync: this,
);
_controller.addListener(() => setState(() {})); _controller.addListener(() => setState(() {}));
_controller.addStatusListener((AnimationStatus status) { _controller.addStatusListener((AnimationStatus status) {
if (status == AnimationStatus.completed) changeCardsOrder(); if (status == AnimationStatus.completed) changeCardsOrder();
@ -140,30 +148,31 @@ class _CardsSectionState extends State<SwipeableCardsSection>
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Expanded( return Expanded(
child: IgnorePointer( child: IgnorePointer(
ignoring: !enableSwipe, ignoring: !enableSwipe,
child: Stack( child: Stack(
children: <Widget>[ children: <Widget>[
if (cards[2] != null) backCard(), if (cards[2] != null) backCard(),
if (cards[1] != null) middleCard(), if (cards[1] != null) middleCard(),
if (cards[0] != null) frontCard(), if (cards[0] != null) frontCard(),
// Prevent swiping if the cards are animating // Prevent swiping if the cards are animating
((_controller.status != AnimationStatus.forward)) if (_controller.status != AnimationStatus.forward)
? SizedBox.expand( SizedBox.expand(
child: GestureDetector( child: GestureDetector(
// While dragging the first card // While dragging the first card
onPanUpdate: (DragUpdateDetails details) { onPanUpdate: (DragUpdateDetails details) {
// Add what the user swiped in the last frame to the alignment of the card // Add what the user swiped in the last frame to the alignment of the card
setState(() { setState(() {
frontCardAlign = Alignment( frontCardAlign = Alignment(
frontCardAlign.x + frontCardAlign.x +
20 * 20 *
details.delta.dx / details.delta.dx /
MediaQuery.of(context).size.width, MediaQuery.of(context).size.width,
frontCardAlign.y + frontCardAlign.y +
20 * 20 *
details.delta.dy / details.delta.dy /
MediaQuery.of(context).size.height); MediaQuery.of(context).size.height,
);
frontCardRot = frontCardAlign.x; // * rotation speed; frontCardRot = frontCardAlign.x; // * rotation speed;
}); });
@ -202,11 +211,14 @@ class _CardsSectionState extends State<SwipeableCardsSection>
animateCards(); animateCards();
} }
}, },
)) ),
: Container(), )
], else
const SizedBox(),
],
),
), ),
)); );
} }
Widget backCard() { Widget backCard() {
@ -215,10 +227,11 @@ class _CardsSectionState extends State<SwipeableCardsSection>
? CardsAnimation.backCardAlignmentAnim(_controller).value ? CardsAnimation.backCardAlignmentAnim(_controller).value
: cardsAlign[0], : cardsAlign[0],
child: SizedBox.fromSize( child: SizedBox.fromSize(
size: _controller.status == AnimationStatus.forward size: _controller.status == AnimationStatus.forward
? CardsAnimation.backCardSizeAnim(_controller).value ? CardsAnimation.backCardSizeAnim(_controller).value
: cardsSize[2], : cardsSize[2],
child: cards[2]), child: cards[2],
),
); );
} }
@ -228,24 +241,27 @@ class _CardsSectionState extends State<SwipeableCardsSection>
? CardsAnimation.middleCardAlignmentAnim(_controller).value ? CardsAnimation.middleCardAlignmentAnim(_controller).value
: cardsAlign[1], : cardsAlign[1],
child: SizedBox.fromSize( child: SizedBox.fromSize(
size: _controller.status == AnimationStatus.forward size: _controller.status == AnimationStatus.forward
? CardsAnimation.middleCardSizeAnim(_controller).value ? CardsAnimation.middleCardSizeAnim(_controller).value
: cardsSize[1], : cardsSize[1],
child: cards[1]), child: cards[1],
),
); );
} }
Widget frontCard() { Widget frontCard() {
return Align( return Align(
alignment: _controller.status == AnimationStatus.forward alignment: _controller.status == AnimationStatus.forward
? CardsAnimation.frontCardDisappearAlignmentAnim( ? CardsAnimation.frontCardDisappearAlignmentAnim(
_controller, frontCardAlign) _controller,
.value frontCardAlign,
: frontCardAlign, ).value
child: Transform.rotate( : frontCardAlign,
angle: (pi / 180.0) * frontCardRot, child: Transform.rotate(
child: SizedBox.fromSize(size: cardsSize[0], child: cards[0]), angle: (pi / 180.0) * frontCardRot,
)); child: SizedBox.fromSize(size: cardsSize[0], child: cards[0]),
),
);
} }
void changeCardsOrder() { void changeCardsOrder() {
@ -265,70 +281,87 @@ class _CardsSectionState extends State<SwipeableCardsSection>
} }
void animateCards() { void animateCards() {
_controller.stop(); _controller
_controller.value = 0.0; ..stop()
_controller.forward(); ..value = 0.0
..forward();
} }
} }
class CardsAnimation { class CardsAnimation {
static Animation<Alignment> backCardAlignmentAnim( static Animation<Alignment> backCardAlignmentAnim(
AnimationController parent) { AnimationController parent,
) {
return AlignmentTween(begin: cardsAlign[0], end: cardsAlign[1]).animate( return AlignmentTween(begin: cardsAlign[0], end: cardsAlign[1]).animate(
CurvedAnimation( CurvedAnimation(
parent: parent, parent: parent,
curve: const Interval(0.4, 0.7, curve: Curves.easeIn))); curve: const Interval(0.4, 0.7, curve: Curves.easeIn),
),
);
} }
static Animation<Size?> backCardSizeAnim(AnimationController parent) { static Animation<Size?> backCardSizeAnim(AnimationController parent) {
return SizeTween(begin: cardsSize[2], end: cardsSize[1]).animate( return SizeTween(begin: cardsSize[2], end: cardsSize[1]).animate(
CurvedAnimation( CurvedAnimation(
parent: parent, parent: parent,
curve: const Interval(0.4, 0.7, curve: Curves.easeIn))); curve: const Interval(0.4, 0.7, curve: Curves.easeIn),
),
);
} }
static Animation<Alignment> middleCardAlignmentAnim( static Animation<Alignment> middleCardAlignmentAnim(
AnimationController parent) { AnimationController parent,
) {
return AlignmentTween(begin: cardsAlign[1], end: cardsAlign[2]).animate( return AlignmentTween(begin: cardsAlign[1], end: cardsAlign[2]).animate(
CurvedAnimation( CurvedAnimation(
parent: parent, parent: parent,
curve: const Interval(0.2, 0.5, curve: Curves.easeIn))); curve: const Interval(0.2, 0.5, curve: Curves.easeIn),
),
);
} }
static Animation<Size?> middleCardSizeAnim(AnimationController parent) { static Animation<Size?> middleCardSizeAnim(AnimationController parent) {
return SizeTween(begin: cardsSize[1], end: cardsSize[0]).animate( return SizeTween(begin: cardsSize[1], end: cardsSize[0]).animate(
CurvedAnimation( CurvedAnimation(
parent: parent, parent: parent,
curve: const Interval(0.2, 0.5, curve: Curves.easeIn))); curve: const Interval(0.2, 0.5, curve: Curves.easeIn),
),
);
} }
static Animation<Alignment> frontCardDisappearAlignmentAnim( static Animation<Alignment> frontCardDisappearAlignmentAnim(
AnimationController parent, Alignment beginAlign) { AnimationController parent,
Alignment beginAlign,
) {
if (beginAlign.x == -0.001 || if (beginAlign.x == -0.001 ||
beginAlign.x == 0.001 || beginAlign.x == 0.001 ||
beginAlign.x > 3.0 || beginAlign.x > 3.0 ||
beginAlign.x < -3.0) { beginAlign.x < -3.0) {
return AlignmentTween( return AlignmentTween(
begin: beginAlign, begin: beginAlign,
end: Alignment( end: Alignment(
beginAlign.x > 0 ? beginAlign.x + 30.0 : beginAlign.x - 30.0, beginAlign.x > 0 ? beginAlign.x + 30.0 : beginAlign.x - 30.0,
0.0) // Has swiped to the left or right? 0.0,
) ), // Has swiped to the left or right?
.animate(CurvedAnimation( ).animate(
parent: parent, CurvedAnimation(
curve: const Interval(0.0, 0.5, curve: Curves.easeIn))); parent: parent,
curve: const Interval(0.0, 0.5, curve: Curves.easeIn),
),
);
} else { } else {
return AlignmentTween( return AlignmentTween(
begin: beginAlign, begin: beginAlign,
end: Alignment( end: Alignment(
0.0, 0.0,
beginAlign.y > 0 beginAlign.y > 0 ? beginAlign.y + 30.0 : beginAlign.y - 30.0,
? beginAlign.y + 30.0 ), // Has swiped to the top or bottom?
: beginAlign.y - 30.0) // Has swiped to the top or bottom? ).animate(
) CurvedAnimation(
.animate(CurvedAnimation( parent: parent,
parent: parent, curve: const Interval(0.0, 0.5, curve: Curves.easeIn),
curve: const Interval(0.0, 0.5, curve: Curves.easeIn))); ),
);
} }
} }
} }