Skip to content

Commit 4916206

Browse files
SaadArdatiSaadArdati
committed
📝 README.md docs + cleanup.
1 parent 41bc356 commit 4916206

File tree

8 files changed

+534
-102
lines changed

8 files changed

+534
-102
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
## 0.0.1
22

3-
* TODO: Describe initial release.
3+
* Initial Release.

‎README.md‎

Lines changed: 389 additions & 23 deletions
Large diffs are not rendered by default.

‎example/lib/main.dart‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import 'package:example/stories/color_filter_scroll_transition.dart';
12
import 'package:example/stories/windows_settings_transition.dart';
23
import 'package:example/stories/scroll_phase_transition.dart';
34
import 'package:example/stories/scroll_wheel_transition.dart';
@@ -23,9 +24,14 @@ class MyApp extends StatelessWidget {
2324
stories: [
2425
Story(
2526
name: 'Scroll Phase Offset',
26-
description: 'Offsetting elements based on the phase of the scroll',
27+
description: 'Offsetting elements based on the phase of the scroll.',
2728
builder: (context) => const ScrollPhaseTransition(),
2829
),
30+
Story(
31+
name: 'Scroll Phase Color Filter Transition',
32+
description: 'Blending and changing image colors based on scroll phase.',
33+
builder: (context) => const ColorFilterScrollTransition(),
34+
),
2935
Story(
3036
name: 'Scroll Wheel Transition',
3137
description: 'Warping elements to mimic a cylindrical effect.',
@@ -34,7 +40,7 @@ class MyApp extends StatelessWidget {
3440
Story(
3541
name: 'Scroll Phase Blur',
3642
description:
37-
'A focus effect where elements outside the view are blurred',
43+
'A focus effect where elements outside the view are blurred',
3844
builder: (context) => const ScrollWheelBlurTransition(),
3945
),
4046
Story(

‎example/lib/stories/color_filter_scroll_transition.dart‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:hyper_effects/hyper_effects.dart';
3+
4+
class ColorFilterScrollTransition extends StatefulWidget {
5+
const ColorFilterScrollTransition({super.key});
6+
7+
@override
8+
State<ColorFilterScrollTransition> createState() =>
9+
_ColorFilterScrollTransitionState();
10+
}
11+
12+
class _ColorFilterScrollTransitionState
13+
extends State<ColorFilterScrollTransition> {
14+
static const List<String> images = [
15+
'https://imgv3.fotor.com/images/slider-image/A-clear-image-of-a-woman-wearing-red-sharpened-by-Fotors-image-sharpener.jpg',
16+
'https://media.istockphoto.com/id/1281783803/photo/mountains-velliangiri-view-with-blue-sky-and-green-fores.jpg?s=612x612&w=0&k=20&c=25epzQEXtzNmGMtUoBa13SpHZ4rGz2HDLuHfWaUa51o=',
17+
'https://stimg.cardekho.com/images/carexteriorimages/630x420/Hyundai/Venue/10142/1684739946788/front-left-side-47.jpg?imwidth=420&impolicy=resize',
18+
'https://www.befunky.com/images/prismic/82e0e255-17f9-41e0-85f1-210163b0ea34_hero-blur-image-3.jpg?auto=avif,webp&format=jpg&width=896',
19+
'https://images.unsplash.com/photo-1682685797661-9e0c87f59c60',
20+
];
21+
22+
@override
23+
Widget build(BuildContext context) {
24+
return ListView.builder(
25+
itemBuilder: (context, index) {
26+
return Padding(
27+
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
28+
child: Container(
29+
width: 350,
30+
height: 200,
31+
alignment: Alignment.center,
32+
clipBehavior: Clip.antiAlias,
33+
decoration: BoxDecoration(
34+
// color: randomColor(index),
35+
image: DecorationImage(
36+
image: NetworkImage(
37+
images[index % images.length],
38+
),
39+
fit: BoxFit.cover,
40+
),
41+
borderRadius: BorderRadius.circular(16),
42+
),
43+
child: Text(
44+
'Item $index',
45+
style: const TextStyle(
46+
fontSize: 24,
47+
color: Colors.white,
48+
),
49+
),
50+
).scrollTransition((context, widget, event) =>
51+
widget /*.translateX(
52+
switch (event.phase) {
53+
ScrollPhase.identity => 0,
54+
ScrollPhase.topLeading => 200,
55+
ScrollPhase.bottomTrailing => -200,
56+
},
57+
)*/
58+
/*.colorFilter(color:
59+
switch (event.phase) {
60+
ScrollPhase.identity =>
61+
Colors.pink.withOpacity(0.5),
62+
ScrollPhase.topLeading =>
63+
Colors.blue.withOpacity(0.5),
64+
ScrollPhase.bottomTrailing =>
65+
Colors.blue.withOpacity(0.5),
66+
},
67+
mode: BlendMode.overlay,
68+
)*/
69+
.colorFilter(
70+
matrix: switch (event.phase) {
71+
ScrollPhase.identity => ColorFilterMatrix.greyscale,
72+
ScrollPhase.topLeading => ColorFilterMatrix.sepia,
73+
ScrollPhase.bottomTrailing => ColorFilterMatrix.sepia,
74+
},
75+
// color: switch (event.phase) {
76+
// ScrollPhase.identity =>
77+
// Colors.pink.withOpacity(0.5),
78+
// ScrollPhase.topLeading =>
79+
// Colors.blue.withOpacity(0.5),
80+
// ScrollPhase.bottomTrailing =>
81+
// Colors.blue.withOpacity(0.5),
82+
// },
83+
mode: BlendMode.overlay,
84+
)
85+
.clipRRect(BorderRadius.circular(16))
86+
.scale(event.phase.isIdentity ? 1 : 0.7)
87+
/*.rotate(switch (event.phase) {
88+
ScrollPhase.identity => 0,
89+
ScrollPhase.topLeading => pi / 2,
90+
ScrollPhase.bottomTrailing => -pi / 2,
91+
}),*/
92+
),
93+
);
94+
},
95+
);
96+
}
97+
}

‎example/lib/stories/scroll_phase_transition.dart‎

Lines changed: 23 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -18,84 +18,34 @@ class _ScrollPhaseTransitionState extends State<ScrollPhaseTransition> {
1818
return Color.fromARGB(255, r, g, b);
1919
}
2020

21-
static const List<String> images = [
22-
'https://imgv3.fotor.com/images/slider-image/A-clear-image-of-a-woman-wearing-red-sharpened-by-Fotors-image-sharpener.jpg',
23-
'https://media.istockphoto.com/id/1281783803/photo/mountains-velliangiri-view-with-blue-sky-and-green-fores.jpg?s=612x612&w=0&k=20&c=25epzQEXtzNmGMtUoBa13SpHZ4rGz2HDLuHfWaUa51o=',
24-
'https://stimg.cardekho.com/images/carexteriorimages/630x420/Hyundai/Venue/10142/1684739946788/front-left-side-47.jpg?imwidth=420&impolicy=resize',
25-
'https://www.befunky.com/images/prismic/82e0e255-17f9-41e0-85f1-210163b0ea34_hero-blur-image-3.jpg?auto=avif,webp&format=jpg&width=896',
26-
'https://images.unsplash.com/photo-1682685797661-9e0c87f59c60',
27-
];
28-
2921
@override
3022
Widget build(BuildContext context) {
3123
return ListView.builder(
3224
itemBuilder: (context, index) {
33-
return Padding(
34-
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
35-
child: Container(
36-
width: 350,
37-
height: 200,
38-
alignment: Alignment.center,
39-
clipBehavior: Clip.antiAlias,
40-
decoration: BoxDecoration(
41-
// color: randomColor(index),
42-
image: DecorationImage(
43-
image: NetworkImage(
44-
images[index % images.length],
45-
),
46-
fit: BoxFit.cover,
47-
),
48-
borderRadius: BorderRadius.circular(16),
49-
),
50-
child: Text(
51-
'Item $index',
52-
style: const TextStyle(
53-
fontSize: 24,
54-
color: Colors.white,
55-
),
25+
return Container(
26+
width: 350,
27+
height: 200,
28+
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
29+
alignment: Alignment.center,
30+
decoration: BoxDecoration(
31+
color: randomColor(index),
32+
borderRadius: BorderRadius.circular(16),
33+
),
34+
child: Text(
35+
'Item $index',
36+
style: const TextStyle(
37+
fontSize: 24,
38+
color: Colors.white,
5639
),
57-
).scrollTransition((context, widget, event) =>
58-
widget /*.translateX(
59-
switch (event.phase) {
60-
ScrollPhase.identity => 0,
61-
ScrollPhase.topLeading => 200,
62-
ScrollPhase.bottomTrailing => -200,
63-
},
64-
)*/
65-
/*.colorFilter(color:
66-
switch (event.phase) {
67-
ScrollPhase.identity =>
68-
Colors.pink.withOpacity(0.5),
69-
ScrollPhase.topLeading =>
70-
Colors.blue.withOpacity(0.5),
71-
ScrollPhase.bottomTrailing =>
72-
Colors.blue.withOpacity(0.5),
73-
},
74-
mode: BlendMode.overlay,
75-
)*/
76-
.colorFilter(
77-
matrix: switch (event.phase) {
78-
ScrollPhase.identity => ColorFilterMatrix.greyscale,
79-
ScrollPhase.topLeading => ColorFilterMatrix.sepia,
80-
ScrollPhase.bottomTrailing => ColorFilterMatrix.sepia,
81-
},
82-
// color: switch (event.phase) {
83-
// ScrollPhase.identity =>
84-
// Colors.pink.withOpacity(0.5),
85-
// ScrollPhase.topLeading =>
86-
// Colors.blue.withOpacity(0.5),
87-
// ScrollPhase.bottomTrailing =>
88-
// Colors.blue.withOpacity(0.5),
89-
// },
90-
mode: BlendMode.overlay,
91-
)
92-
.clipRRect(BorderRadius.circular(16))
93-
.scale(event.phase.isIdentity ? 1 : 0.7)
94-
/*.rotate(switch (event.phase) {
95-
ScrollPhase.identity => 0,
96-
ScrollPhase.topLeading => pi / 2,
97-
ScrollPhase.bottomTrailing => -pi / 2,
98-
}),*/
40+
),
41+
).scrollTransition(
42+
(context, widget, event) =>
43+
widget.scale(event.phase.isIdentity ? 1 : 0.7).translateX(
44+
switch (event.phase) {
45+
ScrollPhase.identity => 0,
46+
ScrollPhase.topLeading => 200,
47+
ScrollPhase.bottomTrailing => -200,
48+
},
9949
),
10050
);
10151
},

‎lib/src/effects/color_filter_effect.dart‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,11 @@ class ColorFilterEffect extends Effect {
6969
List<Object?> get props => [color, mode, matrix];
7070
}
7171

72+
/// A set of predefined color filter matrices.
7273
class ColorFilterMatrix {
7374
ColorFilterMatrix._();
7475

76+
/// A matrix that inverts the colors.
7577
static const List<double> invert = <double>[
7678
-1,
7779
0,
@@ -95,6 +97,7 @@ class ColorFilterMatrix {
9597
0,
9698
];
9799

100+
/// A matrix that turns the image into sepia-tone.
98101
static const List<double> sepia = <double>[
99102
0.393,
100103
0.769,
@@ -118,6 +121,7 @@ class ColorFilterMatrix {
118121
0,
119122
];
120123

124+
/// A matrix that turns the image into greyscale.
121125
static const List<double> greyscale = <double>[
122126
0.2126,
123127
0.7152,
@@ -141,6 +145,7 @@ class ColorFilterMatrix {
141145
0,
142146
];
143147

148+
/// A matrix that does nothing.
144149
static const List<double> identity = <double>[
145150
1,
146151
0,

‎lib/src/pointer_transition.dart‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,17 @@ extension PointerTransitionExt on Widget {
5454
bool useGlobalPointer = false,
5555
bool transitionBetweenBounds = true,
5656
bool resetOnExitBounds = true,
57+
Curve curve = appleEaseInOut,
58+
Duration duration = const Duration(milliseconds: 125),
5759
}) {
5860
return PointerTransition(
5961
builder: builder,
6062
origin: origin,
6163
useGlobalPointer: useGlobalPointer,
6264
transitionBetweenBounds: transitionBetweenBounds,
6365
resetOnExitBounds: resetOnExitBounds,
66+
curve: curve,
67+
duration: duration,
6468
child: this,
6569
);
6670
}
@@ -75,9 +79,9 @@ class PointerTransition extends StatefulWidget {
7579

7680
/// Defines where the origin of the pointer should be.
7781
/// If the origin is set to [Alignment.center], as the pointer moves away
78-
/// from the center of the screen, the [currentValue] value will increase.
82+
/// from the center of the screen, the [value] value will increase.
7983
/// If the origin is set to [Alignment.topLeft], as the pointer moves away
80-
/// from the top left corner of the screen, the [currentValue] value will
84+
/// from the top left corner of the screen, the [value] value will
8185
/// increase.
8286
final Alignment origin;
8387

‎pubspec.yaml‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
name: hyper_effects
22
description: A new Flutter project.
33
version: 0.0.1
4-
homepage:
4+
5+
homepage: https://hyperdesigned.dev/
6+
repository: https://github.com/hyper-designed/hyper_effects
7+
issue_tracker: https://github.com/hyper-designed/hyper_effects/issues
8+
documentation: https://docs.page/hyper-designed/hyper_effects
59

610
environment:
711
sdk: '>=3.1.3 <4.0.0'

0 commit comments

Comments
 (0)