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

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();
@ -148,8 +156,8 @@ class _CardsSectionState extends State<SwipeableCardsSection>
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) {
@ -163,7 +171,8 @@ class _CardsSectionState extends State<SwipeableCardsSection>
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() {
@ -218,7 +230,8 @@ class _CardsSectionState extends State<SwipeableCardsSection>
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],
),
); );
} }
@ -231,7 +244,8 @@ class _CardsSectionState extends State<SwipeableCardsSection>
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],
),
); );
} }
@ -239,13 +253,15 @@ class _CardsSectionState extends State<SwipeableCardsSection>
return Align( return Align(
alignment: _controller.status == AnimationStatus.forward alignment: _controller.status == AnimationStatus.forward
? CardsAnimation.frontCardDisappearAlignmentAnim( ? CardsAnimation.frontCardDisappearAlignmentAnim(
_controller, frontCardAlign) _controller,
.value frontCardAlign,
).value
: frontCardAlign, : frontCardAlign,
child: Transform.rotate( child: Transform.rotate(
angle: (pi / 180.0) * frontCardRot, angle: (pi / 180.0) * frontCardRot,
child: SizedBox.fromSize(size: cardsSize[0], child: cards[0]), child: SizedBox.fromSize(size: cardsSize[0], child: cards[0]),
)); ),
);
} }
void changeCardsOrder() { void changeCardsOrder() {
@ -265,45 +281,58 @@ 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 ||
@ -312,23 +341,27 @@ class CardsAnimation {
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(
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),
),
);
} 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),
),
);
} }
} }
} }