From dc16c4c3579f2599c0eddb8bc61797de8f9c9262 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Tue, 14 Oct 2025 16:40:49 -0300 Subject: [PATCH] Update decoration_mix.dart Refactor List to use BoxShadowListMix type Replaces List with BoxShadowListMix throughout the codebase for boxShadow properties and related methods. Adds extension for converting List to BoxShadowListMix, updates utility, mixin, and test usages for consistency and improved type safety. --- .../lib/api/design_tokens/theme_tokens.dart | 7 ++++++- .../properties/painting/decoration_mix.dart | 20 +++++++++++-------- .../properties/painting/decoration_util.dart | 13 +++++++----- .../src/properties/painting/shadow_mix.dart | 6 ++++++ .../style/mixins/decoration_style_mixin.dart | 6 +++--- .../src/style/mixins/shadow_style_mixin.dart | 6 +++--- .../test/src/core/decoration_merge_test.dart | 8 ++++++-- .../properties/painting/border_util_test.dart | 6 +++--- .../painting/decoration_mix_test.dart | 10 +++++----- .../painting/decoration_util_test.dart | 4 ++-- .../test/src/specs/box/box_style_test.dart | 4 ++-- 11 files changed, 56 insertions(+), 34 deletions(-) diff --git a/packages/mix/example/lib/api/design_tokens/theme_tokens.dart b/packages/mix/example/lib/api/design_tokens/theme_tokens.dart index 5e9177fef..dcfe7abfe 100644 --- a/packages/mix/example/lib/api/design_tokens/theme_tokens.dart +++ b/packages/mix/example/lib/api/design_tokens/theme_tokens.dart @@ -24,6 +24,7 @@ void main() { final $primaryColor = ColorToken('primary'); final $pill = RadiusToken('pill'); final $spacing = SpaceToken('spacing.large'); +final $shadow = BoxShadowToken('shadow.card'); class Example extends StatelessWidget { const Example({super.key}); @@ -34,6 +35,9 @@ class Example extends StatelessWidget { colors: {$primaryColor: Colors.blue}, spaces: {$spacing: 16.0}, radii: {$pill: Radius.circular(20)}, + boxShadows: { + $shadow: [BoxShadow(color: Colors.red, blurRadius: 10)], + }, child: _Example(), ); } @@ -49,7 +53,8 @@ class _Example extends StatelessWidget { .color($primaryColor()) .height(100) .width(100) - .paddingAll(16.0); + .paddingAll(16.0) + .shadows($shadow.mix()); return Box(style: style); } diff --git a/packages/mix/lib/src/properties/painting/decoration_mix.dart b/packages/mix/lib/src/properties/painting/decoration_mix.dart index 8313bb064..b0318f75c 100644 --- a/packages/mix/lib/src/properties/painting/decoration_mix.dart +++ b/packages/mix/lib/src/properties/painting/decoration_mix.dart @@ -62,7 +62,7 @@ sealed class DecorationMix extends Mix { } /// Creates with box shadows. - static BoxDecorationMix boxShadow(List value) { + static BoxDecorationMix boxShadow(BoxShadowListMix value) { return BoxDecorationMix(boxShadow: value); } @@ -124,7 +124,7 @@ final class BoxDecorationMix extends DecorationMix Color? color, DecorationImageMix? image, GradientMix? gradient, - List? boxShadow, + BoxShadowListMix? boxShadow, }) : this.create( border: Prop.maybeMix(border), borderRadius: Prop.maybeMix(borderRadius), @@ -133,9 +133,7 @@ final class BoxDecorationMix extends DecorationMix color: Prop.maybe(color), image: Prop.maybeMix(image), gradient: Prop.maybeMix(gradient), - boxShadow: boxShadow != null - ? Prop.mix(BoxShadowListMix(boxShadow)) - : null, + boxShadow: boxShadow != null ? Prop.mix(boxShadow) : null, ); /// Creates with border only. @@ -162,7 +160,7 @@ final class BoxDecorationMix extends DecorationMix BoxDecorationMix.gradient(GradientMix gradient) : this(gradient: gradient); /// Creates a box decoration with only the box shadows specified. - BoxDecorationMix.boxShadow(List boxShadow) + BoxDecorationMix.boxShadow(BoxShadowListMix boxShadow) : this(boxShadow: boxShadow); /// Creates a [BoxDecorationMix] from an existing [BoxDecoration]. @@ -177,7 +175,13 @@ final class BoxDecorationMix extends DecorationMix color: decoration.color, image: DecorationImageMix.maybeValue(decoration.image), gradient: GradientMix.maybeValue(decoration.gradient), - boxShadow: decoration.boxShadow?.map(BoxShadowMix.value).toList(), + boxShadow: decoration.boxShadow != null + ? BoxShadowListMix( + decoration.boxShadow! + .map((e) => BoxShadowMix.value(e)) + .toList(), + ) + : null, ); const BoxDecorationMix.create({ @@ -217,7 +221,7 @@ final class BoxDecorationMix extends DecorationMix } /// Returns a copy with the specified box shadows. - BoxDecorationMix boxShadow(List value) { + BoxDecorationMix boxShadow(BoxShadowListMix value) { return merge(BoxDecorationMix.boxShadow(value)); } diff --git a/packages/mix/lib/src/properties/painting/decoration_util.dart b/packages/mix/lib/src/properties/painting/decoration_util.dart index 94d0c59f1..c11e6bede 100644 --- a/packages/mix/lib/src/properties/painting/decoration_util.dart +++ b/packages/mix/lib/src/properties/painting/decoration_util.dart @@ -68,10 +68,13 @@ final class BoxDecorationUtility> /// Utility for defining [BoxDecorationMix.boxShadow] from elevation late final elevation = MixUtility( - (elevation) => only(boxShadow: BoxShadowMix.fromElevation(elevation)), + (elevation) => + only(boxShadow: BoxShadowMix.fromElevation(elevation).toMix()), ); - late final boxShadow = BoxShadowUtility((v) => only(boxShadow: [v])); + late final boxShadow = BoxShadowUtility( + (v) => only(boxShadow: BoxShadowListMix([v])), + ); /// Utility for defining [BoxDecorationMix.borderRadius] late final _borderRadiusGeometry = BorderRadiusGeometryUtility( @@ -85,7 +88,7 @@ final class BoxDecorationUtility> /// Utility for defining [BoxDecorationMix.boxShadow] from a list of BoxShadow T boxShadows(List shadows) { - return only(boxShadow: shadows.map(BoxShadowMix.value).toList()); + return only(boxShadow: shadows.map(BoxShadowMix.value).toList().toMix()); } T only({ @@ -93,7 +96,7 @@ final class BoxDecorationUtility> DecorationImageMix? image, BoxBorderMix? border, BorderRadiusGeometryMix? borderRadius, - List? boxShadow, + BoxShadowListMix? boxShadow, GradientMix? gradient, BlendMode? backgroundBlendMode, BoxShape? shape, @@ -127,7 +130,7 @@ final class BoxDecorationUtility> image: DecorationImageMix.maybeValue(image), border: BoxBorderMix.maybeValue(border), borderRadius: BorderRadiusGeometryMix.maybeValue(borderRadius), - boxShadow: boxShadow?.map(BoxShadowMix.value).toList(), + boxShadow: boxShadow?.map(BoxShadowMix.value).toList().toMix(), gradient: GradientMix.maybeValue(gradient), backgroundBlendMode: backgroundBlendMode, shape: shape, diff --git a/packages/mix/lib/src/properties/painting/shadow_mix.dart b/packages/mix/lib/src/properties/painting/shadow_mix.dart index cd9435942..fb4308f61 100644 --- a/packages/mix/lib/src/properties/painting/shadow_mix.dart +++ b/packages/mix/lib/src/properties/painting/shadow_mix.dart @@ -331,3 +331,9 @@ class BoxShadowListMix extends Mix> with Diagnosticable { @override List get props => [items]; } + +extension BoxShadowListMixExt on List { + BoxShadowListMix toMix() { + return BoxShadowListMix(this); + } +} 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 96f8afda3..755c6ecc1 100644 --- a/packages/mix/lib/src/style/mixins/decoration_style_mixin.dart +++ b/packages/mix/lib/src/style/mixins/decoration_style_mixin.dart @@ -36,18 +36,18 @@ mixin DecorationStyleMixin> { /// Sets single shadow T shadow(BoxShadowMix value) { - return decoration(BoxDecorationMix.boxShadow([value])); + return decoration(BoxDecorationMix.boxShadow(BoxShadowListMix([value]))); } /// Sets multiple shadows - T shadows(List value) { + T shadows(BoxShadowListMix value) { return decoration(BoxDecorationMix.boxShadow(value)); } /// Sets elevation shadow T elevation(ElevationShadow value) { return decoration( - BoxDecorationMix.boxShadow(BoxShadowMix.fromElevation(value)), + BoxDecorationMix.boxShadow(BoxShadowMix.fromElevation(value).toMix()), ); } diff --git a/packages/mix/lib/src/style/mixins/shadow_style_mixin.dart b/packages/mix/lib/src/style/mixins/shadow_style_mixin.dart index 8d23f136e..35dea19b1 100644 --- a/packages/mix/lib/src/style/mixins/shadow_style_mixin.dart +++ b/packages/mix/lib/src/style/mixins/shadow_style_mixin.dart @@ -23,18 +23,18 @@ mixin ShadowStyleMixin> { spreadRadius: spreadRadius, ); - return decoration(BoxDecorationMix.boxShadow([shadow])); + return decoration(BoxDecorationMix.boxShadow(BoxShadowListMix([shadow]))); } /// Creates multiple box shadows from a list of BoxShadowMix - T boxShadows(List value) { + T boxShadows(BoxShadowListMix value) { return decoration(BoxDecorationMix.boxShadow(value)); } /// Creates box shadows from Material Design elevation level T boxElevation(ElevationShadow value) { return decoration( - BoxDecorationMix.boxShadow(BoxShadowMix.fromElevation(value)), + BoxDecorationMix.boxShadow(BoxShadowMix.fromElevation(value).toMix()), ); } } diff --git a/packages/mix/test/src/core/decoration_merge_test.dart b/packages/mix/test/src/core/decoration_merge_test.dart index 444546ffc..0f8b5595e 100644 --- a/packages/mix/test/src/core/decoration_merge_test.dart +++ b/packages/mix/test/src/core/decoration_merge_test.dart @@ -292,7 +292,9 @@ void main() { test('handles decorations with only shadows/boxShadow', () { final boxWithShadows = BoxDecorationMix( - boxShadow: [BoxShadowMix(color: Colors.black26, blurRadius: 4)], + boxShadow: BoxShadowListMix([ + BoxShadowMix(color: Colors.black26, blurRadius: 4), + ]), ); final shapeWithShadows = ShapeDecorationMix( shadows: [ @@ -351,7 +353,9 @@ void main() { final box = BoxDecorationMix( color: Colors.red, gradient: LinearGradientMix(colors: [Colors.white, Colors.black]), - boxShadow: [BoxShadowMix(color: Colors.black26, blurRadius: 4)], + boxShadow: BoxShadowListMix([ + BoxShadowMix(color: Colors.black26, blurRadius: 4), + ]), ); final shape = ShapeDecorationMix( color: Colors.blue, diff --git a/packages/mix/test/src/properties/painting/border_util_test.dart b/packages/mix/test/src/properties/painting/border_util_test.dart index 6380469ff..084248ce4 100644 --- a/packages/mix/test/src/properties/painting/border_util_test.dart +++ b/packages/mix/test/src/properties/painting/border_util_test.dart @@ -38,18 +38,18 @@ class TestBorderStyle extends MockStyle @override TestBorderStyle shadow(BoxShadowMix value) { - return decoration(BoxDecorationMix.boxShadow([value])); + return decoration(BoxDecorationMix.boxShadow(BoxShadowListMix([value]))); } @override - TestBorderStyle shadows(List value) { + TestBorderStyle shadows(BoxShadowListMix value) { return decoration(BoxDecorationMix.boxShadow(value)); } @override TestBorderStyle elevation(ElevationShadow value) { return decoration( - BoxDecorationMix.boxShadow(BoxShadowMix.fromElevation(value)), + BoxDecorationMix.boxShadow(BoxShadowMix.fromElevation(value).toMix()), ); } diff --git a/packages/mix/test/src/properties/painting/decoration_mix_test.dart b/packages/mix/test/src/properties/painting/decoration_mix_test.dart index bd4e09c90..ac39e196f 100644 --- a/packages/mix/test/src/properties/painting/decoration_mix_test.dart +++ b/packages/mix/test/src/properties/painting/decoration_mix_test.dart @@ -14,7 +14,7 @@ void main() { backgroundBlendMode: BlendMode.multiply, border: BorderMix.all(BorderSideMix(color: Colors.red, width: 2.0)), borderRadius: BorderRadiusMix(topLeft: const Radius.circular(8.0)), - boxShadow: [BoxShadowMix(color: Colors.black, blurRadius: 5.0)], + boxShadow: BoxShadowListMix([BoxShadowMix(color: Colors.black, blurRadius: 5.0)]), ); expect(boxDecorationMix.$color, resolvesTo(Colors.blue)); @@ -163,10 +163,10 @@ void main() { test('resolves with complex properties', () { final boxDecorationMix = BoxDecorationMix( borderRadius: BorderRadiusMix(topLeft: const Radius.circular(8.0)), - boxShadow: [ + boxShadow: BoxShadowListMix([ BoxShadowMix(color: Colors.black, blurRadius: 5.0), BoxShadowMix(color: Colors.grey, blurRadius: 10.0), - ], + ]), ); final resolved = boxDecorationMix.resolve(MockBuildContext()); @@ -207,11 +207,11 @@ void main() { test('merges list properties correctly', () { final first = BoxDecorationMix( - boxShadow: [BoxShadowMix(color: Colors.black, blurRadius: 5.0)], + boxShadow: BoxShadowListMix([BoxShadowMix(color: Colors.black, blurRadius: 5.0)]), ); final second = BoxDecorationMix( - boxShadow: [BoxShadowMix(color: Colors.grey, blurRadius: 10.0)], + boxShadow: BoxShadowListMix([BoxShadowMix(color: Colors.grey, blurRadius: 10.0)]), ); final merged = first.merge(second); diff --git a/packages/mix/test/src/properties/painting/decoration_util_test.dart b/packages/mix/test/src/properties/painting/decoration_util_test.dart index c905dcecf..ac8d1eb00 100644 --- a/packages/mix/test/src/properties/painting/decoration_util_test.dart +++ b/packages/mix/test/src/properties/painting/decoration_util_test.dart @@ -352,14 +352,14 @@ void main() { BoxDecorationMix( color: Colors.red, shape: BoxShape.circle, - boxShadow: [ + boxShadow: BoxShadowListMix([ BoxShadowMix( color: Colors.black, offset: const Offset(2, 2), blurRadius: 4.0, spreadRadius: 0.0, ), - ], + ]), ), ); }); diff --git a/packages/mix/test/src/specs/box/box_style_test.dart b/packages/mix/test/src/specs/box/box_style_test.dart index 9a4a5d94a..80d469f14 100644 --- a/packages/mix/test/src/specs/box/box_style_test.dart +++ b/packages/mix/test/src/specs/box/box_style_test.dart @@ -252,10 +252,10 @@ void main() { }); test('shadows method sets multiple shadows', () { - final shadows = [ + final shadows = BoxShadowListMix([ BoxShadowMix(color: Colors.black, blurRadius: 5.0), BoxShadowMix(color: Colors.grey, blurRadius: 10.0), - ]; + ]); final boxMix = BoxStyler().shadows(shadows); expect(boxMix.$decoration, isNotNull);