You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: composeextensions/src/main/kotlin/sco/carlukesoftware/composeextensions/Modifiers.kt
+68Lines changed: 68 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -191,6 +191,15 @@ fun Modifier.innerShadow(
191
191
}
192
192
}
193
193
194
+
/**
195
+
* Applies a fade effect over the content, drawing a gradient from an initial color to a final color.
196
+
* This can be used to create effects like text fading into the background.
197
+
*
198
+
* @param initialColor The color at the start of the gradient. Defaults to [Color.Transparent].
199
+
* @param fadeToColor The color at the end of the gradient. Defaults to [Color.White].
200
+
* @param verticalFade If true, the gradient will be vertical (top to bottom). If false, it will be horizontal (left to right). Defaults to true.
201
+
* @return A [Modifier] that draws a gradient over the content.
202
+
*/
194
203
fun Modifier.fadeOut(
195
204
initialColor:Color = Color.Transparent,
196
205
fadeToColor:Color = Color.White,
@@ -203,6 +212,21 @@ fun Modifier.fadeOut(
203
212
)
204
213
}
205
214
215
+
/**
216
+
* Applies a glowing effect around the composable.
217
+
*
218
+
* This modifier draws a shadow layer behind the composable, creating a "glow" effect.
219
+
* The shape of the glow will match the rounded rectangle shape of the composable.
220
+
*
221
+
* @param glowingColor The color of the glow.
222
+
* @param containerColor The color of the container itself. This is drawn to provide a surface for the shadow to appear behind. Defaults to [Color.White].
223
+
* @param cornerRadius The corner radius for the rounded rectangle shape of both the container and the glow. Defaults to 0.dp for a sharp-cornered rectangle.
224
+
* @param glowingRadius The blur radius of the glow. A larger value will create a more spread-out and softer glow. Defaults to 20.dp.
225
+
* @param glowAlpha The alpha transparency of the glow. Defaults to 0.8f.
226
+
* @param offsetX The horizontal offset of the glow. A positive value shifts the glow to the right, a negative value to the left. Defaults to 0.dp.
227
+
* @param offsetY The vertical offset of the glow. A positive value shifts the glow downwards, a negative value upwards. Defaults to 0.dp.
228
+
* @return A [Modifier] that applies the glow effect.
229
+
*/
206
230
fun Modifier.glow(
207
231
glowingColor:Color,
208
232
containerColor:Color = Color.White,
@@ -232,6 +256,21 @@ fun Modifier.glow(
232
256
}
233
257
234
258
259
+
/**
260
+
* Creates a parallax effect on a composable as the user scrolls.
261
+
* The composable's vertical position is adjusted based on the `scrollState`.
262
+
*
263
+
* This modifier is useful for creating depth in a scrollable layout, where some elements
264
+
* (like a background image) move at a different speed than the foreground content.
265
+
*
266
+
* @param scrollState The [ScrollState] of the scrollable container. The parallax effect
267
+
* is driven by changes in this state's value.
268
+
* @param rate A factor to control the speed of the parallax effect. A higher rate results
269
+
* in a slower movement of the composable. A rate of 0 will cause the composable
270
+
* to move at the same speed as the scroll, while a negative rate is not recommended.
271
+
* The vertical offset is calculated as `scrollState.value / rate`.
272
+
* @return A [Modifier] that applies the parallax layout behavior.
273
+
*/
235
274
fun Modifier.parallaxLayout(scrollState:ScrollState, rate:Int) =
236
275
layout { measurable, constraints ->
237
276
val placeable = measurable.measure(constraints = constraints)
@@ -247,6 +286,14 @@ fun Modifier.parallaxLayout(scrollState: ScrollState, rate: Int) =
247
286
248
287
}
249
288
289
+
/**
290
+
* Applies a shimmering effect to the composable. This is often used to indicate a loading state.
291
+
* The shimmer is a linear gradient that animates across the composable.
292
+
*
293
+
* This overload uses a predefined set of grey colors for the shimmer effect.
294
+
*
295
+
* @return A [Modifier] that adds the shimmer effect.
296
+
*/
250
297
fun Modifier.shimmerEffect(): Modifier= composed {
251
298
var size by remember {
252
299
mutableStateOf(IntSize.Zero)
@@ -279,6 +326,27 @@ fun Modifier.shimmerEffect(): Modifier = composed {
279
326
}
280
327
}
281
328
329
+
/**
330
+
* Applies a shimmering effect to a composable, typically used for loading placeholders.
331
+
*
332
+
* This modifier creates a shimmering animation by applying a linear gradient that moves across the composable.
333
+
* The animation is an infinite loop, giving the appearance of a continuous shimmer.
334
+
*
335
+
* The gradient consists of three colors by default (`0xFFB8B5B5`, `0xFF6D6868`, `0xFFB8B5B5`)
336
+
* to create a highlight effect that sweeps across the component.
337
+
*
338
+
* @return A [Modifier] that applies the shimmer effect.
0 commit comments