Skip to content

Commit 0595bd6

Browse files
amalChandranamalChandran
committed
working code after some minor refactor
1 parent 3ec6b00 commit 0595bd6

File tree

1 file changed

+76
-103
lines changed

1 file changed

+76
-103
lines changed

‎lib/vinyl/vinyl.dart

Lines changed: 76 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,10 @@ class _TransformAppState extends State<TransformApp>
4343
late Animation<double> _topJumpAnimation;
4444
late Animation<double> _topMoveForwardAnimation;
4545

46-
final List<VinylItem> _vinylItems = vinylItems;
46+
final List<VinylItem> _vinylItems = List.from(vinylItems);
47+
48+
String firstVinylId = vinylItems[0].id;
4749

48-
// double _manualValue = 0;
4950
@override
5051
void initState() {
5152
super.initState();
@@ -106,11 +107,6 @@ class _TransformAppState extends State<TransformApp>
106107
.chain(CurveTween(curve: Curves.linear)),
107108
weight: 50.0,
108109
),
109-
// TweenSequenceItem(
110-
// tween: Tween<double>(begin: -120, end: -120)
111-
// .chain(CurveTween(curve: Curves.linear)),
112-
// weight: 20.0,
113-
// ),
114110
TweenSequenceItem(
115111
tween: Tween<double>(begin: -120, end: 0.0)
116112
.chain(CurveTween(curve: Curves.linear)),
@@ -136,7 +132,7 @@ class _TransformAppState extends State<TransformApp>
136132
Widget build(BuildContext context) {
137133
return Scaffold(
138134
body: GestureDetector(
139-
onTap: () => _changeOrder(),
135+
onTap: () => _changeStackOrder(),
140136
child: Expanded(
141137
child: Stack(
142138
fit: StackFit.expand,
@@ -182,11 +178,10 @@ class _TransformAppState extends State<TransformApp>
182178
padding:
183179
EdgeInsets.symmetric(horizontal: 40.0, vertical: 20.0),
184180
shape: RoundedRectangleBorder(
185-
borderRadius: BorderRadius.circular(
186-
4.0), // Change this value for different radii
181+
borderRadius: BorderRadius.circular(4.0),
187182
),
188-
foregroundColor: Colors.black, // Text color
189-
backgroundColor: Colors.white, // Background color
183+
foregroundColor: Colors.black,
184+
backgroundColor: Colors.white,
190185
),
191186
onPressed: () {
192187
animController.forward();
@@ -213,29 +208,29 @@ class _TransformAppState extends State<TransformApp>
213208
builder: (context, child) {
214209
return Stack(
215210
children: List.generate(_vinylItems.length, (index) {
216-
var verticalAnimationValue = 0.0;
217-
var zPositionValue = 0.0;
218-
var rotateX = 0.0;
219-
if (_vinylItems[index].id == 'vinyl_3') {
220-
verticalAnimationValue = _combinedVerticalAnimation.value;
221-
zPositionValue =
211+
var vinylItem = _vinylItems[index];
212+
if (vinylItem.id == 'vinyl_3') {
213+
vinylItem.verticalAnimationValue =
214+
_combinedVerticalAnimation.value;
215+
vinylItem.zPositionValue =
222216
lerpDouble(-100.0, 0.0, _pushBackAnimation.value)!;
223-
rotateX = _flipAnimation.value;
224-
// lerpDouble(0.0, 2 * pi, _flipAnimation.value)!;
217+
vinylItem.rotateX = _flipAnimation.value;
225218
} else if (_vinylItems[index].id == 'vinyl_2') {
226-
verticalAnimationValue = _topJumpAnimation.value;
227-
zPositionValue = -50.0 + _topMoveForwardAnimation.value;
228-
rotateX = 0.0;
219+
vinylItem.verticalAnimationValue = _topJumpAnimation.value;
220+
vinylItem.zPositionValue = -50.0 + _topMoveForwardAnimation.value;
221+
vinylItem.rotateX = 0.0;
229222
} else if (_vinylItems[index].id == 'vinyl_1') {
230-
verticalAnimationValue = _topJumpAnimation.value;
231-
zPositionValue = (-0 * 50.0) + _topMoveForwardAnimation.value;
232-
rotateX = 0.0;
223+
vinylItem.verticalAnimationValue = _topJumpAnimation.value;
224+
vinylItem.zPositionValue =
225+
(-0 * 50.0) + _topMoveForwardAnimation.value;
226+
vinylItem.rotateX = 0.0;
233227
}
234228

235229
return Transform(
236230
transform: Matrix4.identity()
237-
..translate(0.0, verticalAnimationValue, zPositionValue)
238-
..rotateX(rotateX),
231+
..translate(0.0, vinylItem.verticalAnimationValue,
232+
vinylItem.zPositionValue)
233+
..rotateX(vinylItem.rotateX),
239234
alignment: Alignment.center, // -index * 50.0
240235
child: Container(
241236
width: 200,
@@ -251,76 +246,10 @@ class _TransformAppState extends State<TransformApp>
251246
);
252247
}),
253248
);
254-
255-
// Stack(
256-
// children: [
257-
// Transform(
258-
// transform: Matrix4.identity()
259-
// ..translate(0.0, 0.0, 0.0), // -index * 50.0
260-
// child: Container(
261-
// width: 200,
262-
// height: 200,
263-
// color: Colors.green,
264-
// child: Center(
265-
// child: Text(
266-
// 'Layer 1',
267-
// style: TextStyle(color: Colors.white),
268-
// ),
269-
// ),
270-
// ),
271-
// ),
272-
// Transform(
273-
// transform: Matrix4.identity()
274-
// ..translate(0.0, 0.0, -50.0), // -index * 50.0
275-
// child: Container(
276-
// width: 200,
277-
// height: 200,
278-
// color: Colors.yellow,
279-
// child: Center(
280-
// child: Text(
281-
// 'Layer 2',
282-
// style: TextStyle(color: Colors.white),
283-
// ),
284-
// ),
285-
// ),
286-
// ),
287-
// Transform(
288-
// transform: Matrix4.identity()
289-
// ..translate(
290-
// 0.0,
291-
// _combinedVerticalAnimation.value,
292-
// // combinedLerp(
293-
// // 0.0, 200.0, _freeFallAnimation, _goBackUPAnimation),
294-
// // lerpDouble(0.0, 200.0, _freeFallAnimation.value)!,
295-
// lerpDouble(-100.0, 0.0, _pushBackAnimation.value)!)
296-
// ..rotateX(lerpDouble(
297-
// 0.0, 2 * pi, _flipAnimation.value)!), // -index * 50.0
298-
// alignment: Alignment.center,
299-
// child: Container(
300-
// width: 200,
301-
// height: 200,
302-
// color: Colors.purple,
303-
// child: Center(
304-
// child: Text(
305-
// 'Layer 3',
306-
// style: TextStyle(color: Colors.white),
307-
// ),
308-
// ),
309-
// ),
310-
// ),
311-
// ],
312-
// );
313249
},
314250
);
315251
}
316252

317-
_choreo() {
318-
//------------------
319-
//First vinyl translates down by Y + 200
320-
//First vinyl rotates
321-
//------------------
322-
}
323-
324253
Widget _buildSlider({
325254
required double value,
326255
required ValueChanged<double> onChanged,
@@ -344,31 +273,75 @@ class _TransformAppState extends State<TransformApp>
344273
bool _isStackReordered = false;
345274
_animationHooks() {
346275
if (animController.value >= 0.5 && !_isStackReordered) {
347-
_changeOrder();
276+
_changeStackOrder();
348277
_isStackReordered = true;
349278
} else if (animController.value < 0.5) {
350279
_isStackReordered = false;
351280
}
281+
282+
if (animController.isCompleted) {
283+
_changeAnimationListOrder();
284+
}
352285
}
353286

354-
void _changeOrder() {
355-
print("_changeOrder");
287+
// Update called in the middle of animation to make the card go behind another card!
288+
void _changeStackOrder() {
289+
print("_changeStackOrder");
356290
setState(() {
357-
VinylItem item = vinylItems.removeAt(2);
358-
vinylItems.insert(0, item);
291+
VinylItem item = _vinylItems.removeAt(_vinylItems.length - 1);
292+
_vinylItems.insert(0, item);
293+
});
294+
}
295+
296+
// Update called after the animation has finished
297+
void _changeAnimationListOrder() {
298+
print("_changeAnimationListOrder");
299+
setState(() {
300+
String firstElement = vinylOrder.removeAt(0);
301+
vinylOrder.add(firstElement);
359302
});
360303
}
361304
}
362305

363306
class VinylItem {
364307
final String id;
365308
final Color color;
309+
double verticalAnimationValue = 0.0;
310+
double zPositionValue = 0.0;
311+
double rotateX = 0.0;
366312

367-
VinylItem({required this.id, required this.color});
313+
VinylItem(
314+
{required this.id,
315+
required this.color,
316+
this.verticalAnimationValue = 0.0,
317+
this.zPositionValue = 0.0,
318+
this.rotateX = 0.0});
368319
}
369320

321+
// verticalAnimationValue = _combinedVerticalAnimation.value;
322+
// zPositionValue =
323+
// lerpDouble(-100.0, 0.0, _pushBackAnimation.value)!;
324+
// rotateX = _flipAnimation.value;
325+
370326
final List<VinylItem> vinylItems = [
371-
VinylItem(id: 'vinyl_1', color: Colors.green),
372-
VinylItem(id: 'vinyl_2', color: Colors.yellow),
373-
VinylItem(id: 'vinyl_3', color: Colors.purple),
327+
VinylItem(
328+
id: 'vinyl_1',
329+
color: Colors.green,
330+
verticalAnimationValue: 0.0,
331+
zPositionValue: 0.0,
332+
rotateX: 0.0),
333+
VinylItem(
334+
id: 'vinyl_2',
335+
color: Colors.yellow,
336+
verticalAnimationValue: 0.0,
337+
zPositionValue: 0.0,
338+
rotateX: 0.0),
339+
VinylItem(
340+
id: 'vinyl_3',
341+
color: Colors.purple,
342+
verticalAnimationValue: 0.0,
343+
zPositionValue: 0.0,
344+
rotateX: 0.0),
374345
];
346+
347+
final vinylOrder = ['vinyl_3', 'vinyl_2', 'vinyl_1'];

0 commit comments

Comments
 (0)