Skip to content

fix(mix): preserve BoxShadow blur style #992

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
leoafarias merged 1 commit into from
Jul 22, 2026
Merged

fix(mix): preserve BoxShadow blur style #992

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 19 additions & 2 deletions packages/mix/lib/src/properties/painting/shadow_mix.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,38 +90,45 @@ class ShadowMix extends BaseShadowMix<Shadow>

/// Mix representation of [BoxShadow].
///
/// Extends [ShadowMix] with spread radius support.
/// Extends [ShadowMix] with blur style and spread radius support.
@mixable
class BoxShadowMix extends BaseShadowMix<BoxShadow>
with DefaultValue<BoxShadow>, Diagnosticable, _$BoxShadowMixMixin {
@override
final Prop<BlurStyle>? $blurStyle;
@override
final Prop<double>? $spreadRadius;

BoxShadowMix({
Color? color,
Offset? offset,
double? blurRadius,
BlurStyle? blurStyle,
double? spreadRadius,
}) : this.create(
color: Prop.maybe(color),
offset: Prop.maybe(offset),
blurRadius: Prop.maybe(blurRadius),
blurStyle: Prop.maybe(blurStyle),
spreadRadius: Prop.maybe(spreadRadius),
);

const BoxShadowMix.create({
super.color,
super.offset,
super.blurRadius,
Prop<BlurStyle>? blurStyle,
Prop<double>? spreadRadius,
}) : $spreadRadius = spreadRadius;
}) : $blurStyle = blurStyle,
$spreadRadius = spreadRadius;

/// Creates a [BoxShadowMix] from an existing [BoxShadow].
BoxShadowMix.value(BoxShadow boxShadow)
: this(
color: boxShadow.color,
offset: boxShadow.offset,
blurRadius: boxShadow.blurRadius,
blurStyle: boxShadow.blurStyle,
spreadRadius: boxShadow.spreadRadius,
);

Expand All @@ -140,6 +147,11 @@ class BoxShadowMix extends BaseShadowMix<BoxShadow>
return BoxShadowMix(blurRadius: value);
}

/// Creates a box shadow with the specified blur style.
factory BoxShadowMix.blurStyle(BlurStyle value) {
return BoxShadowMix(blurStyle: value);
}

/// Creates a box shadow with the specified spread radius.
factory BoxShadowMix.spreadRadius(double value) {
return BoxShadowMix(spreadRadius: value);
Expand Down Expand Up @@ -174,6 +186,11 @@ class BoxShadowMix extends BaseShadowMix<BoxShadow>
return merge(BoxShadowMix.blurRadius(value));
}

/// Copy with blur style.
BoxShadowMix blurStyle(BlurStyle value) {
return merge(BoxShadowMix.blurStyle(value));
}

/// Returns a copy with the specified spread radius.
BoxShadowMix spreadRadius(double value) {
return merge(BoxShadowMix.spreadRadius(value));
Expand Down
12 changes: 11 additions & 1 deletion packages/mix/lib/src/properties/painting/shadow_mix.g.dart
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

65 changes: 63 additions & 2 deletions packages/mix/test/src/properties/painting/shadow_mix_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,12 +207,14 @@ void main() {
test('creates BoxShadowMix with all properties', () {
final boxShadowMix = BoxShadowMix(
blurRadius: 10.0,
blurStyle: BlurStyle.inner,
color: Colors.blue,
offset: const Offset(5.0, 8.0),
spreadRadius: 2.0,
);

expect(boxShadowMix.$blurRadius, resolvesTo(10.0));
expect(boxShadowMix.$blurStyle, resolvesTo(BlurStyle.inner));
expect(boxShadowMix.$color, resolvesTo(Colors.blue));
expect(boxShadowMix.$offset, resolvesTo(const Offset(5.0, 8.0)));
expect(boxShadowMix.$spreadRadius, resolvesTo(2.0));
Expand All @@ -222,6 +224,7 @@ void main() {
final boxShadowMix = BoxShadowMix();

expect(boxShadowMix.$blurRadius, isNull);
expect(boxShadowMix.$blurStyle, isNull);
expect(boxShadowMix.$color, isNull);
expect(boxShadowMix.$offset, isNull);
expect(boxShadowMix.$spreadRadius, isNull);
Expand Down Expand Up @@ -256,6 +259,16 @@ void main() {
expect(boxShadowMix.$spreadRadius, isNull);
});

test('blurStyle factory creates BoxShadowMix with blurStyle', () {
final boxShadowMix = BoxShadowMix.blurStyle(BlurStyle.outer);

expect(boxShadowMix.$blurStyle, resolvesTo(BlurStyle.outer));
expect(boxShadowMix.$blurRadius, isNull);
expect(boxShadowMix.$color, isNull);
expect(boxShadowMix.$offset, isNull);
expect(boxShadowMix.$spreadRadius, isNull);
});

test('spreadRadius factory creates BoxShadowMix with spreadRadius', () {
final boxShadowMix = BoxShadowMix.spreadRadius(3.0);

Expand All @@ -280,6 +293,7 @@ void main() {
test('creates BoxShadowMix from BoxShadow', () {
const boxShadow = BoxShadow(
blurRadius: 15.0,
blurStyle: BlurStyle.inner,
color: Colors.red,
offset: Offset(3.0, 6.0),
spreadRadius: 4.0,
Expand All @@ -288,22 +302,30 @@ void main() {
final boxShadowMix = BoxShadowMix.value(boxShadow);

expect(boxShadowMix.$blurRadius, resolvesTo(15.0));
expect(boxShadowMix.$blurStyle, resolvesTo(BlurStyle.inner));
expect(boxShadowMix.$color, resolvesTo(Colors.red));
expect(boxShadowMix.$offset, resolvesTo(const Offset(3.0, 6.0)));
expect(boxShadowMix.$spreadRadius, resolvesTo(4.0));
expect(boxShadowMix, resolvesTo(boxShadow));
});

test('maybeValue returns null for null boxShadow', () {
expect(BoxShadowMix.maybeValue(null), isNull);
});

test('maybeValue returns BoxShadowMix for non-null boxShadow', () {
const boxShadow = BoxShadow(blurRadius: 5.0, spreadRadius: 1.0);
const boxShadow = BoxShadow(
blurRadius: 5.0,
blurStyle: BlurStyle.outer,
spreadRadius: 1.0,
);
final boxShadowMix = BoxShadowMix.maybeValue(boxShadow);

expect(boxShadowMix, isNotNull);
expect(boxShadowMix!.$blurRadius, resolvesTo(5.0));
expect(boxShadowMix.$blurStyle, resolvesTo(BlurStyle.outer));
expect(boxShadowMix.$spreadRadius, resolvesTo(1.0));
expect(boxShadowMix, resolvesTo(boxShadow));
});
});

Expand All @@ -326,6 +348,12 @@ void main() {
expect(boxShadowMix.$blurRadius, resolvesTo(12.0));
});

test('blurStyle utility works correctly', () {
final boxShadowMix = BoxShadowMix().blurStyle(BlurStyle.solid);

expect(boxShadowMix.$blurStyle, resolvesTo(BlurStyle.solid));
});

test('spreadRadius utility works correctly', () {
final boxShadowMix = BoxShadowMix().spreadRadius(4.0);

Expand All @@ -337,13 +365,15 @@ void main() {
test('resolves to BoxShadow with correct properties', () {
final boxShadowMix = BoxShadowMix(
blurRadius: 12.0,
blurStyle: BlurStyle.inner,
color: Colors.green,
offset: const Offset(2.0, 4.0),
spreadRadius: 3.0,
);

const resolvedValue = BoxShadow(
blurRadius: 12.0,
blurStyle: BlurStyle.inner,
color: Colors.green,
offset: Offset(2.0, 4.0),
spreadRadius: 3.0,
Expand All @@ -370,11 +400,13 @@ void main() {
test('merges properties correctly', () {
final first = BoxShadowMix(
blurRadius: 10.0,
blurStyle: BlurStyle.inner,
color: Colors.blue,
spreadRadius: 1.0,
);

final second = BoxShadowMix(
blurStyle: BlurStyle.outer,
color: Colors.red,
offset: const Offset(3.0, 3.0),
spreadRadius: 2.0,
Expand All @@ -383,6 +415,10 @@ void main() {
final merged = first.merge(second);

expect(merged.$blurRadius, resolvesTo(10.0)); // from first
expect(
merged.$blurStyle,
resolvesTo(BlurStyle.outer),
); // second overrides
expect(merged.$color, resolvesTo(Colors.red)); // second overrides
expect(
merged.$offset,
Expand All @@ -391,6 +427,20 @@ void main() {
expect(merged.$spreadRadius, resolvesTo(2.0)); // second overrides
});

test('later blurStyle overrides earlier blurStyle', () {
final first = BoxShadowMix.value(
const BoxShadow(blurStyle: BlurStyle.inner),
);
final second = BoxShadowMix.value(
const BoxShadow(blurStyle: BlurStyle.solid),
);

expect(
first.merge(second),
resolvesTo(const BoxShadow(blurStyle: BlurStyle.solid)),
);
});

test('returns equivalent instance when other is null', () {
final boxShadowMix = BoxShadowMix(blurRadius: 5.0);
final merged = boxShadowMix.merge(null);
Expand All @@ -404,12 +454,14 @@ void main() {
test('equal box shadows have same hashCode', () {
final boxShadow1 = BoxShadowMix(
blurRadius: 10.0,
blurStyle: BlurStyle.inner,
color: Colors.blue,
spreadRadius: 2.0,
);

final boxShadow2 = BoxShadowMix(
blurRadius: 10.0,
blurStyle: BlurStyle.inner,
color: Colors.blue,
spreadRadius: 2.0,
);
Expand All @@ -424,19 +476,28 @@ void main() {

expect(boxShadow1, isNot(equals(boxShadow2)));
});

test('different blur styles are not equal', () {
final boxShadow1 = BoxShadowMix(blurStyle: BlurStyle.inner);
final boxShadow2 = BoxShadowMix(blurStyle: BlurStyle.outer);

expect(boxShadow1, isNot(equals(boxShadow2)));
});
});

group('Props getter', () {
test('props includes all properties', () {
final boxShadowMix = BoxShadowMix(
blurRadius: 10.0,
blurStyle: BlurStyle.inner,
color: Colors.blue,
offset: const Offset(5.0, 8.0),
spreadRadius: 2.0,
);

expect(boxShadowMix.props.length, 4);
expect(boxShadowMix.props.length, 5);
expect(boxShadowMix.props, contains(boxShadowMix.$blurRadius));
expect(boxShadowMix.props, contains(boxShadowMix.$blurStyle));
expect(boxShadowMix.props, contains(boxShadowMix.$color));
expect(boxShadowMix.props, contains(boxShadowMix.$offset));
expect(boxShadowMix.props, contains(boxShadowMix.$spreadRadius));
Expand Down
4 changes: 4 additions & 0 deletions packages/mix_protocol/lib/src/inventory/schema_inventory_manifest.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -432,6 +432,10 @@ const _v1UnsupportedInventory = <SchemaInventoryEntry>[
r'mix:BorderRadiusDirectionalMix.$topStart',
_v1OutOfScope,
),
SchemaInventoryEntry.knownUnsupported(
r'mix:BoxShadowMix.$blurStyle',
_v1OutOfScope,
),
SchemaInventoryEntry.knownUnsupported(
r'mix:CircleBorderMix.$eccentricity',
_v1OutOfScope,
Expand Down
Loading