From 050b72b853266145e928f0cba0b7ea43940ba0a5 Mon Sep 17 00:00:00 2001 From: Leo Farias Date: Mon, 28 Sep 2026 23:19:51 -0400 Subject: [PATCH] feat(mix): accept transform in gradient shorthands linearGradient, radialGradient, sweepGradient and their foreground counterparts now take an optional GradientTransform, forwarded to the underlying LinearGradientMix/RadialGradientMix/SweepGradientMix. Rotating a gradient (for example GradientRotation driven by a keyframe track) no longer requires dropping to gradient(SweepGradientMix(...)). The generated BoxStyler, FlexBoxStyler, StackBoxStyler and WrapBoxStyler factories pick up the parameter via regeneration. --- packages/mix/CHANGELOG.md | 13 ++ .../mix/lib/src/specs/box/box_spec.g.dart | 12 ++ .../lib/src/specs/flexbox/flexbox_spec.g.dart | 12 ++ .../src/specs/stackbox/stackbox_spec.g.dart | 12 ++ .../lib/src/specs/wrapbox/wrapbox_spec.g.dart | 12 ++ .../style/mixins/decoration_style_mixin.dart | 30 ++++ .../src/specs/box/box_style_factory_test.dart | 155 ++++++++++++++++++ skills/mix/references/animations.md | 22 +++ skills/mix/references/fluent-api.md | 2 +- 9 files changed, 269 insertions(+), 1 deletion(-) diff --git a/packages/mix/CHANGELOG.md b/packages/mix/CHANGELOG.md index f67bd7c2f..2368a6ab3 100644 --- a/packages/mix/CHANGELOG.md +++ b/packages/mix/CHANGELOG.md @@ -1,3 +1,16 @@ +## Unreleased + +### New features + +- **Gradient shorthand transforms:** `linearGradient`, `radialGradient`, + `sweepGradient`, and their `foreground*Gradient` counterparts (plus the + generated `BoxStyler`, `FlexBoxStyler`, `StackBoxStyler`, and `WrapBoxStyler` + factories) now accept an optional `GradientTransform transform`, so a + gradient can be rotated, for example + `.sweepGradient(colors: colors, transform: GradientRotation(angle))`, without + switching to `gradient(SweepGradientMix(...))`. The parameter is optional and + existing calls are unchanged. + ## 2.2.0 Stable release of the 2.2.0 line, cumulative over the `2.2.0-beta.0` through diff --git a/packages/mix/lib/src/specs/box/box_spec.g.dart b/packages/mix/lib/src/specs/box/box_spec.g.dart index a7e9254d2..515867b1d 100644 --- a/packages/mix/lib/src/specs/box/box_spec.g.dart +++ b/packages/mix/lib/src/specs/box/box_spec.g.dart @@ -294,12 +294,14 @@ class BoxStyler extends MixStyler AlignmentGeometry? begin, AlignmentGeometry? end, TileMode? tileMode, + GradientTransform? transform, }) => BoxStyler().linearGradient( colors: colors, stops: stops, begin: begin, end: end, tileMode: tileMode, + transform: transform, ); factory BoxStyler.radialGradient({ required List colors, @@ -309,6 +311,7 @@ class BoxStyler extends MixStyler AlignmentGeometry? focal, double? focalRadius, TileMode? tileMode, + GradientTransform? transform, }) => BoxStyler().radialGradient( colors: colors, stops: stops, @@ -317,6 +320,7 @@ class BoxStyler extends MixStyler focal: focal, focalRadius: focalRadius, tileMode: tileMode, + transform: transform, ); factory BoxStyler.sweepGradient({ required List colors, @@ -325,6 +329,7 @@ class BoxStyler extends MixStyler double? startAngle, double? endAngle, TileMode? tileMode, + GradientTransform? transform, }) => BoxStyler().sweepGradient( colors: colors, stops: stops, @@ -332,6 +337,7 @@ class BoxStyler extends MixStyler startAngle: startAngle, endAngle: endAngle, tileMode: tileMode, + transform: transform, ); factory BoxStyler.foregroundLinearGradient({ required List colors, @@ -339,12 +345,14 @@ class BoxStyler extends MixStyler AlignmentGeometry? begin, AlignmentGeometry? end, TileMode? tileMode, + GradientTransform? transform, }) => BoxStyler().foregroundLinearGradient( colors: colors, stops: stops, begin: begin, end: end, tileMode: tileMode, + transform: transform, ); factory BoxStyler.foregroundRadialGradient({ required List colors, @@ -354,6 +362,7 @@ class BoxStyler extends MixStyler AlignmentGeometry? focal, double? focalRadius, TileMode? tileMode, + GradientTransform? transform, }) => BoxStyler().foregroundRadialGradient( colors: colors, stops: stops, @@ -362,6 +371,7 @@ class BoxStyler extends MixStyler focal: focal, focalRadius: focalRadius, tileMode: tileMode, + transform: transform, ); factory BoxStyler.foregroundSweepGradient({ required List colors, @@ -370,6 +380,7 @@ class BoxStyler extends MixStyler double? startAngle, double? endAngle, TileMode? tileMode, + GradientTransform? transform, }) => BoxStyler().foregroundSweepGradient( colors: colors, stops: stops, @@ -377,6 +388,7 @@ class BoxStyler extends MixStyler startAngle: startAngle, endAngle: endAngle, tileMode: tileMode, + transform: transform, ); factory BoxStyler.transform(Matrix4 value, {Alignment alignment = .center}) => BoxStyler().transform(value, alignment: alignment); diff --git a/packages/mix/lib/src/specs/flexbox/flexbox_spec.g.dart b/packages/mix/lib/src/specs/flexbox/flexbox_spec.g.dart index d82f1310c..df868d02e 100644 --- a/packages/mix/lib/src/specs/flexbox/flexbox_spec.g.dart +++ b/packages/mix/lib/src/specs/flexbox/flexbox_spec.g.dart @@ -240,12 +240,14 @@ class FlexBoxStyler extends MixStyler AlignmentGeometry? begin, AlignmentGeometry? end, TileMode? tileMode, + GradientTransform? transform, }) => FlexBoxStyler().linearGradient( colors: colors, stops: stops, begin: begin, end: end, tileMode: tileMode, + transform: transform, ); factory FlexBoxStyler.radialGradient({ required List colors, @@ -255,6 +257,7 @@ class FlexBoxStyler extends MixStyler AlignmentGeometry? focal, double? focalRadius, TileMode? tileMode, + GradientTransform? transform, }) => FlexBoxStyler().radialGradient( colors: colors, stops: stops, @@ -263,6 +266,7 @@ class FlexBoxStyler extends MixStyler focal: focal, focalRadius: focalRadius, tileMode: tileMode, + transform: transform, ); factory FlexBoxStyler.sweepGradient({ required List colors, @@ -271,6 +275,7 @@ class FlexBoxStyler extends MixStyler double? startAngle, double? endAngle, TileMode? tileMode, + GradientTransform? transform, }) => FlexBoxStyler().sweepGradient( colors: colors, stops: stops, @@ -278,6 +283,7 @@ class FlexBoxStyler extends MixStyler startAngle: startAngle, endAngle: endAngle, tileMode: tileMode, + transform: transform, ); factory FlexBoxStyler.foregroundLinearGradient({ required List colors, @@ -285,12 +291,14 @@ class FlexBoxStyler extends MixStyler AlignmentGeometry? begin, AlignmentGeometry? end, TileMode? tileMode, + GradientTransform? transform, }) => FlexBoxStyler().foregroundLinearGradient( colors: colors, stops: stops, begin: begin, end: end, tileMode: tileMode, + transform: transform, ); factory FlexBoxStyler.foregroundRadialGradient({ required List colors, @@ -300,6 +308,7 @@ class FlexBoxStyler extends MixStyler AlignmentGeometry? focal, double? focalRadius, TileMode? tileMode, + GradientTransform? transform, }) => FlexBoxStyler().foregroundRadialGradient( colors: colors, stops: stops, @@ -308,6 +317,7 @@ class FlexBoxStyler extends MixStyler focal: focal, focalRadius: focalRadius, tileMode: tileMode, + transform: transform, ); factory FlexBoxStyler.foregroundSweepGradient({ required List colors, @@ -316,6 +326,7 @@ class FlexBoxStyler extends MixStyler double? startAngle, double? endAngle, TileMode? tileMode, + GradientTransform? transform, }) => FlexBoxStyler().foregroundSweepGradient( colors: colors, stops: stops, @@ -323,6 +334,7 @@ class FlexBoxStyler extends MixStyler startAngle: startAngle, endAngle: endAngle, tileMode: tileMode, + transform: transform, ); factory FlexBoxStyler.row() => FlexBoxStyler().row(); factory FlexBoxStyler.column() => FlexBoxStyler().column(); diff --git a/packages/mix/lib/src/specs/stackbox/stackbox_spec.g.dart b/packages/mix/lib/src/specs/stackbox/stackbox_spec.g.dart index 6182f1500..db62ab56f 100644 --- a/packages/mix/lib/src/specs/stackbox/stackbox_spec.g.dart +++ b/packages/mix/lib/src/specs/stackbox/stackbox_spec.g.dart @@ -232,12 +232,14 @@ class StackBoxStyler extends MixStyler AlignmentGeometry? begin, AlignmentGeometry? end, TileMode? tileMode, + GradientTransform? transform, }) => StackBoxStyler().linearGradient( colors: colors, stops: stops, begin: begin, end: end, tileMode: tileMode, + transform: transform, ); factory StackBoxStyler.radialGradient({ required List colors, @@ -247,6 +249,7 @@ class StackBoxStyler extends MixStyler AlignmentGeometry? focal, double? focalRadius, TileMode? tileMode, + GradientTransform? transform, }) => StackBoxStyler().radialGradient( colors: colors, stops: stops, @@ -255,6 +258,7 @@ class StackBoxStyler extends MixStyler focal: focal, focalRadius: focalRadius, tileMode: tileMode, + transform: transform, ); factory StackBoxStyler.sweepGradient({ required List colors, @@ -263,6 +267,7 @@ class StackBoxStyler extends MixStyler double? startAngle, double? endAngle, TileMode? tileMode, + GradientTransform? transform, }) => StackBoxStyler().sweepGradient( colors: colors, stops: stops, @@ -270,6 +275,7 @@ class StackBoxStyler extends MixStyler startAngle: startAngle, endAngle: endAngle, tileMode: tileMode, + transform: transform, ); factory StackBoxStyler.foregroundLinearGradient({ required List colors, @@ -277,12 +283,14 @@ class StackBoxStyler extends MixStyler AlignmentGeometry? begin, AlignmentGeometry? end, TileMode? tileMode, + GradientTransform? transform, }) => StackBoxStyler().foregroundLinearGradient( colors: colors, stops: stops, begin: begin, end: end, tileMode: tileMode, + transform: transform, ); factory StackBoxStyler.foregroundRadialGradient({ required List colors, @@ -292,6 +300,7 @@ class StackBoxStyler extends MixStyler AlignmentGeometry? focal, double? focalRadius, TileMode? tileMode, + GradientTransform? transform, }) => StackBoxStyler().foregroundRadialGradient( colors: colors, stops: stops, @@ -300,6 +309,7 @@ class StackBoxStyler extends MixStyler focal: focal, focalRadius: focalRadius, tileMode: tileMode, + transform: transform, ); factory StackBoxStyler.foregroundSweepGradient({ required List colors, @@ -308,6 +318,7 @@ class StackBoxStyler extends MixStyler double? startAngle, double? endAngle, TileMode? tileMode, + GradientTransform? transform, }) => StackBoxStyler().foregroundSweepGradient( colors: colors, stops: stops, @@ -315,6 +326,7 @@ class StackBoxStyler extends MixStyler startAngle: startAngle, endAngle: endAngle, tileMode: tileMode, + transform: transform, ); factory StackBoxStyler.alignment(AlignmentGeometry value) => StackBoxStyler().alignment(value); diff --git a/packages/mix/lib/src/specs/wrapbox/wrapbox_spec.g.dart b/packages/mix/lib/src/specs/wrapbox/wrapbox_spec.g.dart index 65f3a4145..d7acde9d7 100644 --- a/packages/mix/lib/src/specs/wrapbox/wrapbox_spec.g.dart +++ b/packages/mix/lib/src/specs/wrapbox/wrapbox_spec.g.dart @@ -240,12 +240,14 @@ class WrapBoxStyler extends MixStyler AlignmentGeometry? begin, AlignmentGeometry? end, TileMode? tileMode, + GradientTransform? transform, }) => WrapBoxStyler().linearGradient( colors: colors, stops: stops, begin: begin, end: end, tileMode: tileMode, + transform: transform, ); factory WrapBoxStyler.radialGradient({ required List colors, @@ -255,6 +257,7 @@ class WrapBoxStyler extends MixStyler AlignmentGeometry? focal, double? focalRadius, TileMode? tileMode, + GradientTransform? transform, }) => WrapBoxStyler().radialGradient( colors: colors, stops: stops, @@ -263,6 +266,7 @@ class WrapBoxStyler extends MixStyler focal: focal, focalRadius: focalRadius, tileMode: tileMode, + transform: transform, ); factory WrapBoxStyler.sweepGradient({ required List colors, @@ -271,6 +275,7 @@ class WrapBoxStyler extends MixStyler double? startAngle, double? endAngle, TileMode? tileMode, + GradientTransform? transform, }) => WrapBoxStyler().sweepGradient( colors: colors, stops: stops, @@ -278,6 +283,7 @@ class WrapBoxStyler extends MixStyler startAngle: startAngle, endAngle: endAngle, tileMode: tileMode, + transform: transform, ); factory WrapBoxStyler.foregroundLinearGradient({ required List colors, @@ -285,12 +291,14 @@ class WrapBoxStyler extends MixStyler AlignmentGeometry? begin, AlignmentGeometry? end, TileMode? tileMode, + GradientTransform? transform, }) => WrapBoxStyler().foregroundLinearGradient( colors: colors, stops: stops, begin: begin, end: end, tileMode: tileMode, + transform: transform, ); factory WrapBoxStyler.foregroundRadialGradient({ required List colors, @@ -300,6 +308,7 @@ class WrapBoxStyler extends MixStyler AlignmentGeometry? focal, double? focalRadius, TileMode? tileMode, + GradientTransform? transform, }) => WrapBoxStyler().foregroundRadialGradient( colors: colors, stops: stops, @@ -308,6 +317,7 @@ class WrapBoxStyler extends MixStyler focal: focal, focalRadius: focalRadius, tileMode: tileMode, + transform: transform, ); factory WrapBoxStyler.foregroundSweepGradient({ required List colors, @@ -316,6 +326,7 @@ class WrapBoxStyler extends MixStyler double? startAngle, double? endAngle, TileMode? tileMode, + GradientTransform? transform, }) => WrapBoxStyler().foregroundSweepGradient( colors: colors, stops: stops, @@ -323,6 +334,7 @@ class WrapBoxStyler extends MixStyler startAngle: startAngle, endAngle: endAngle, tileMode: tileMode, + transform: transform, ); factory WrapBoxStyler.alignment(AlignmentGeometry value) => WrapBoxStyler().alignment(value); diff --git a/packages/mix/lib/src/style/mixins/decoration_style_mixin.dart b/packages/mix/lib/src/style/mixins/decoration_style_mixin.dart index 2414ae10e..d805cee05 100644 --- a/packages/mix/lib/src/style/mixins/decoration_style_mixin.dart +++ b/packages/mix/lib/src/style/mixins/decoration_style_mixin.dart @@ -229,12 +229,16 @@ mixin DecorationStyleMixin> { // Foreground gradient utilities /// Sets a foreground linear gradient + /// + /// Pass [transform] (for example a [GradientRotation]) to rotate or + /// otherwise transform the gradient without leaving the shorthand. T foregroundLinearGradient({ required List colors, List? stops, AlignmentGeometry? begin, AlignmentGeometry? end, TileMode? tileMode, + GradientTransform? transform, }) { return foregroundDecoration( BoxDecorationMix.gradient( @@ -242,6 +246,7 @@ mixin DecorationStyleMixin> { begin: begin, end: end, tileMode: tileMode, + transform: transform, colors: colors, stops: stops, ), @@ -250,6 +255,9 @@ mixin DecorationStyleMixin> { } /// Sets a foreground radial gradient + /// + /// Pass [transform] (for example a [GradientRotation]) to rotate or + /// otherwise transform the gradient without leaving the shorthand. T foregroundRadialGradient({ required List colors, List? stops, @@ -258,6 +266,7 @@ mixin DecorationStyleMixin> { AlignmentGeometry? focal, double? focalRadius, TileMode? tileMode, + GradientTransform? transform, }) { return foregroundDecoration( BoxDecorationMix.gradient( @@ -265,6 +274,7 @@ mixin DecorationStyleMixin> { center: center, radius: radius, tileMode: tileMode, + transform: transform, focal: focal, focalRadius: focalRadius, colors: colors, @@ -275,6 +285,9 @@ mixin DecorationStyleMixin> { } /// Sets a foreground sweep gradient + /// + /// Pass [transform] (for example a [GradientRotation]) to rotate or + /// otherwise transform the gradient without leaving the shorthand. T foregroundSweepGradient({ required List colors, List? stops, @@ -282,6 +295,7 @@ mixin DecorationStyleMixin> { double? startAngle, double? endAngle, TileMode? tileMode, + GradientTransform? transform, }) { return foregroundDecoration( BoxDecorationMix.gradient( @@ -290,6 +304,7 @@ mixin DecorationStyleMixin> { startAngle: startAngle, endAngle: endAngle, tileMode: tileMode, + transform: transform, colors: colors, stops: stops, ), @@ -300,12 +315,16 @@ mixin DecorationStyleMixin> { // Background gradient utilities /// Sets a background linear gradient + /// + /// Pass [transform] (for example a [GradientRotation]) to rotate or + /// otherwise transform the gradient without leaving the shorthand. T linearGradient({ required List colors, List? stops, AlignmentGeometry? begin, AlignmentGeometry? end, TileMode? tileMode, + GradientTransform? transform, }) { return decoration( BoxDecorationMix.gradient( @@ -313,6 +332,7 @@ mixin DecorationStyleMixin> { begin: begin, end: end, tileMode: tileMode, + transform: transform, colors: colors, stops: stops, ), @@ -321,6 +341,9 @@ mixin DecorationStyleMixin> { } /// Sets a background radial gradient + /// + /// Pass [transform] (for example a [GradientRotation]) to rotate or + /// otherwise transform the gradient without leaving the shorthand. T radialGradient({ required List colors, List? stops, @@ -329,6 +352,7 @@ mixin DecorationStyleMixin> { AlignmentGeometry? focal, double? focalRadius, TileMode? tileMode, + GradientTransform? transform, }) { return decoration( BoxDecorationMix.gradient( @@ -336,6 +360,7 @@ mixin DecorationStyleMixin> { center: center, radius: radius, tileMode: tileMode, + transform: transform, focal: focal, focalRadius: focalRadius, colors: colors, @@ -346,6 +371,9 @@ mixin DecorationStyleMixin> { } /// Sets a background sweep gradient + /// + /// Pass [transform] (for example a [GradientRotation]) to rotate or + /// otherwise transform the gradient without leaving the shorthand. T sweepGradient({ required List colors, List? stops, @@ -353,6 +381,7 @@ mixin DecorationStyleMixin> { double? startAngle, double? endAngle, TileMode? tileMode, + GradientTransform? transform, }) { return decoration( BoxDecorationMix.gradient( @@ -361,6 +390,7 @@ mixin DecorationStyleMixin> { startAngle: startAngle, endAngle: endAngle, tileMode: tileMode, + transform: transform, colors: colors, stops: stops, ), diff --git a/packages/mix/test/src/specs/box/box_style_factory_test.dart b/packages/mix/test/src/specs/box/box_style_factory_test.dart index cb299f2f4..364045c8c 100644 --- a/packages/mix/test/src/specs/box/box_style_factory_test.dart +++ b/packages/mix/test/src/specs/box/box_style_factory_test.dart @@ -272,6 +272,161 @@ void main() { ); }); + group('gradient shorthands forward transform', () { + const colors = [Colors.red, Colors.blue]; + const rotation = GradientRotation(1.5); + + Gradient backgroundGradient(BoxStyler styler) { + final decoration = + styler.$decoration!.resolveProp(MockBuildContext()) + as BoxDecoration; + return decoration.gradient!; + } + + Gradient foregroundGradient(BoxStyler styler) { + final decoration = + styler.$foregroundDecoration!.resolveProp(MockBuildContext()) + as BoxDecoration; + return decoration.gradient!; + } + + test('linearGradient', () { + final styler = BoxStyler().linearGradient( + colors: colors, + transform: rotation, + ); + final gradient = backgroundGradient(styler); + + expect(gradient, isA()); + expect(gradient.transform, rotation); + expect( + styler, + equals( + BoxStyler().gradient( + LinearGradientMix(colors: colors, transform: rotation), + ), + ), + ); + expect( + BoxStyler.linearGradient(colors: colors, transform: rotation), + equals(styler), + ); + }); + + test('radialGradient', () { + final styler = BoxStyler().radialGradient( + colors: colors, + transform: rotation, + ); + final gradient = backgroundGradient(styler); + + expect(gradient, isA()); + expect(gradient.transform, rotation); + expect( + BoxStyler.radialGradient(colors: colors, transform: rotation), + equals(styler), + ); + }); + + test('sweepGradient', () { + final styler = BoxStyler().sweepGradient( + colors: colors, + stops: const [0.0, 1.0], + tileMode: TileMode.repeated, + transform: rotation, + ); + final gradient = backgroundGradient(styler) as SweepGradient; + + expect(gradient.transform, rotation); + expect(gradient.tileMode, TileMode.repeated); + expect(gradient.stops, [0.0, 1.0]); + expect( + styler, + equals( + BoxStyler().gradient( + SweepGradientMix( + colors: colors, + stops: const [0.0, 1.0], + tileMode: TileMode.repeated, + transform: rotation, + ), + ), + ), + ); + expect( + BoxStyler.sweepGradient( + colors: colors, + stops: const [0.0, 1.0], + tileMode: TileMode.repeated, + transform: rotation, + ), + equals(styler), + ); + }); + + test('foregroundLinearGradient', () { + final styler = BoxStyler().foregroundLinearGradient( + colors: colors, + transform: rotation, + ); + final gradient = foregroundGradient(styler); + + expect(gradient, isA()); + expect(gradient.transform, rotation); + expect( + BoxStyler.foregroundLinearGradient( + colors: colors, + transform: rotation, + ), + equals(styler), + ); + }); + + test('foregroundRadialGradient', () { + final styler = BoxStyler().foregroundRadialGradient( + colors: colors, + transform: rotation, + ); + final gradient = foregroundGradient(styler); + + expect(gradient, isA()); + expect(gradient.transform, rotation); + expect( + BoxStyler.foregroundRadialGradient( + colors: colors, + transform: rotation, + ), + equals(styler), + ); + }); + + test('foregroundSweepGradient', () { + final styler = BoxStyler().foregroundSweepGradient( + colors: colors, + transform: rotation, + ); + final gradient = foregroundGradient(styler); + + expect(gradient, isA()); + expect(gradient.transform, rotation); + expect( + BoxStyler.foregroundSweepGradient( + colors: colors, + transform: rotation, + ), + equals(styler), + ); + }); + + test('omitting transform leaves it null', () { + final gradient = backgroundGradient( + BoxStyler().sweepGradient(colors: colors), + ); + + expect(gradient.transform, isNull); + }); + }); + test('transform', () { expect( BoxStyler.transform(Matrix4.identity()), diff --git a/skills/mix/references/animations.md b/skills/mix/references/animations.md index e7f0a4e6d..488defa3f 100644 --- a/skills/mix/references/animations.md +++ b/skills/mix/references/animations.md @@ -175,6 +175,28 @@ Each track represents one animatable property: Keyframes within a track run in sequence; tracks run in parallel. +### Spinning a gradient + +Drive a `GradientRotation` from a looping track. The gradient shorthands take `transform`, so there is no need to drop to `gradient(SweepGradientMix(...))`: + +```dart +final style = BoxStyler() + .size(120, 120) + .shape(.circle()) + .keyframeAnimation( + timeline: [ + KeyframeTrack('turn', [.linear(2 * math.pi, 2.s)], initial: 0), + ], + styleBuilder: (values, style) => style.sweepGradient( + colors: [Colors.cyan, Colors.purple, Colors.cyan], + stops: [0.0, 0.5, 1.0], + transform: GradientRotation(values.get('turn')), + ), + ); +``` + +`GradientRotation` takes radians and rotates around the paint bounds' center. The same `transform:` parameter exists on `linearGradient`, `radialGradient`, and the `foreground*Gradient` variants. + ## Comparison | Type | Use Case | Complexity | Control | diff --git a/skills/mix/references/fluent-api.md b/skills/mix/references/fluent-api.md index 062f9d21f..53f3b2741 100644 --- a/skills/mix/references/fluent-api.md +++ b/skills/mix/references/fluent-api.md @@ -66,7 +66,7 @@ Decoration, color, gradient, border, shadow, shape, background image: | `shape(v)` | Shape border | | `shape(.circle())`, `shape(.stadium())`, `shape(.roundedRectangle())`, etc. | Shape shortcuts | | `backgroundImage(image)`, `backgroundImageUrl(url)`, `backgroundImageAsset(path)` | Background image utilities | -| `linearGradient(...)`, `radialGradient(...)`, `sweepGradient(...)` | Gradient shortcuts | +| `linearGradient(...)`, `radialGradient(...)`, `sweepGradient(...)` | Gradient shortcuts; accept `stops`, `tileMode`, and `transform` (e.g. `GradientRotation`) | | `foregroundLinearGradient(...)`, etc. | Foreground gradient shortcuts | ### BorderStyleMixin