Skip to content

Commit 88d5a8a

Browse files
esDotDevesDotDev
committed
Update SunMoon so it will properly fade out the non-current image.
Fix bug related to globalPosition
1 parent e7c2ab9 commit 88d5a8a

File tree

5 files changed

+66
-55
lines changed

5 files changed

+66
-55
lines changed

‎vignettes/gooey_edge/lib/content_card.dart‎

Lines changed: 52 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -37,54 +37,62 @@ class _ContentCardState extends State<ContentCard> {
3737

3838
@override
3939
Widget build(BuildContext context) {
40-
var size = MediaQuery.of(context).size;
41-
var time = DateTime.now().millisecondsSinceEpoch / 2000;
42-
var scaleX = 1.2 + sin(time) * .05;
43-
var scaleY = 1.2 + cos(time) * .07;
44-
var offsetY = 20 + cos(time) * 20;
45-
return Stack(
46-
alignment: Alignment.center,
47-
fit: StackFit.expand,
48-
children: <Widget>[
49-
Transform(
50-
transform: Matrix4.diagonal3Values(scaleX, scaleY, 1),
51-
child: Transform.translate(
52-
offset: Offset(-(scaleX - 1) / 2 * size.width, -(scaleY - 1) / 2 * size.height + offsetY),
53-
child: Image.asset('images/Bg-${widget.color}.png', fit: BoxFit.cover, package: App.pkg),
54-
),
55-
),
56-
Container(
40+
return LayoutBuilder(
41+
builder: (_, constraints) {
42+
var time = DateTime.now().millisecondsSinceEpoch / 2000;
43+
var scaleX = 1.2 + sin(time) * .05;
44+
var scaleY = 1.2 + cos(time) * .07;
45+
var offsetY = 20 + cos(time) * 20;
46+
final width = constraints.maxWidth;
47+
final height = constraints.maxHeight;
48+
return Stack(
5749
alignment: Alignment.center,
58-
child: Padding(
59-
padding: const EdgeInsets.only(top: 75.0, bottom: 25.0),
60-
child: Column(
61-
children: <Widget>[
62-
//Top Image
63-
Expanded(
64-
flex: 3,
65-
child: Padding(
66-
padding: const EdgeInsets.symmetric(horizontal: 20.0),
67-
child:
68-
Image.asset('images/Illustration-${widget.color}.png', fit: BoxFit.contain, package: App.pkg),
69-
),
70-
),
50+
fit: StackFit.expand,
51+
children: <Widget>[
52+
Transform.translate(
53+
offset: Offset(-(scaleX - 1) / 2 * width, -(scaleY - 1) / 2 * height + offsetY),
54+
child: Transform(
55+
transform: Matrix4.diagonal3Values(scaleX, scaleY, 1),
56+
child: Image.asset('images/Bg-${widget.color}.png', fit: BoxFit.cover, package: App.pkg),
57+
),
58+
),
59+
Container(
60+
alignment: Alignment.center,
61+
child: Padding(
62+
padding: const EdgeInsets.only(top: 75.0, bottom: 25.0),
63+
child: Column(
64+
children: <Widget>[
65+
//Top Image
66+
Expanded(
67+
flex: 3,
68+
child: Padding(
69+
padding: const EdgeInsets.symmetric(horizontal: 20.0),
70+
child: Image.asset(
71+
'images/Illustration-${widget.color}.png',
72+
fit: BoxFit.contain,
73+
package: App.pkg,
74+
),
75+
),
76+
),
7177

72-
//Slider circles
73-
Container(height: 14, child: Image.asset('images/Slider-${widget.color}.png', package: App.pkg)),
78+
//Slider circles
79+
Container(height: 14, child: Image.asset('images/Slider-${widget.color}.png', package: App.pkg)),
7480

75-
//Bottom content
76-
Expanded(
77-
flex: 2,
78-
child: Padding(
79-
padding: const EdgeInsets.symmetric(horizontal: 18.0),
80-
child: _buildBottomContent(),
81-
),
81+
//Bottom content
82+
Expanded(
83+
flex: 2,
84+
child: Padding(
85+
padding: const EdgeInsets.symmetric(horizontal: 18.0),
86+
child: _buildBottomContent(),
87+
),
88+
),
89+
],
8290
),
83-
],
84-
),
85-
),
86-
)
87-
],
91+
),
92+
)
93+
],
94+
);
95+
},
8896
);
8997
}
9098

‎vignettes/gooey_edge/lib/gooey_carousel.dart‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@ class GooeyCarouselState extends State<GooeyCarousel> with SingleTickerProviderS
4040

4141
void _tick(Duration duration) {
4242
_edge.tick(duration);
43+
// TODO: This tick could be more efficient, could use an AnimatedBuilder for the GooeyEdge,
44+
// and just pass the index into the SunMoon widget, which can tick internally when index changes
4345
setState(() {});
4446
}
4547

@@ -90,7 +92,7 @@ class GooeyCarouselState extends State<GooeyCarousel> with SingleTickerProviderS
9092
}
9193

9294
void _handlePanUpdate(DragUpdateDetails details, Size size) {
93-
double dx = details.globalPosition.dx - _dragOffset.dx;
95+
double dx = details.localPosition.dx - _dragOffset.dx;
9496

9597
if (!_isSwipeActive(dx)) {
9698
return;

‎vignettes/gooey_edge/lib/gooey_edge.dart‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import 'dart:math';
33
import 'package:flutter/material.dart';
44
import 'side.dart';
55

6-
class GooeyEdge {
6+
class GooeyEdge extends ChangeNotifier {
77
List<_GooeyPoint> points = [];
88
Side side;
99
double edgeTension = 0.01;
@@ -31,15 +31,15 @@ class GooeyEdge {
3131
touchOffset = null;
3232
return;
3333
}
34-
FractionalOffset o = FractionalOffset.fromOffsetAndSize(offset, size);
34+
final fraction = FractionalOffset.fromOffsetAndSize(offset, size);
3535
if (side == Side.left) {
36-
touchOffset = o;
36+
touchOffset = fraction;
3737
} else if (side == Side.right) {
38-
touchOffset = FractionalOffset(1.0 - o.dx, 1.0 - o.dy);
38+
touchOffset = FractionalOffset(1.0 - fraction.dx, 1.0 - fraction.dy);
3939
} else if (side == Side.top) {
40-
touchOffset = FractionalOffset(o.dy, 1.0 - o.dx);
40+
touchOffset = FractionalOffset(fraction.dy, 1.0 - fraction.dx);
4141
} else {
42-
touchOffset = FractionalOffset(1.0 - o.dy, o.dx);
42+
touchOffset = FractionalOffset(1.0 - fraction.dy, fraction.dx);
4343
}
4444
}
4545

@@ -108,6 +108,7 @@ class GooeyEdge {
108108
_GooeyPoint pt = points[i];
109109
pt.x += pt.velX * t;
110110
}
111+
notifyListeners();
111112
}
112113

113114
Matrix4 _getTransform(Size size, double margin) {

‎vignettes/gooey_edge/lib/sun_moon.dart‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,9 @@ class _SunAndMoonState extends State<SunAndMoon> with SingleTickerProviderStateM
6565

6666
Widget _buildAssetWithDefaultAngle(int index, double degreeAngle) {
6767
double radianAngle = degreeAngle / 180 * pi;
68-
double currentAngle = radianAngle + _rotationAnimation.value * (2 * pi);
69-
return Opacity(
70-
opacity: sin(currentAngle) < 0 ? 1 : 0,
68+
return AnimatedOpacity(
69+
opacity: index == _currentIndex % 3 ? 1 : 0,
70+
duration: Duration(milliseconds: 300),
7171
child: RotationTransition(
7272
turns: _rotationAnimation,
7373
child: Transform.translate(

‎vignettes/gooey_edge/pubspec.lock‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,4 +67,4 @@ packages:
6767
source: hosted
6868
version: "2.1.4"
6969
sdks:
70-
dart: ">=3.2.0-0 <=3.3.0"
70+
dart: ">=3.2.0-0 <4.0.0"

0 commit comments

Comments
 (0)