Skip to content

docs(mix): consolidate chained widget modifiers #57

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
tilucasoli merged 1 commit into from
Oct 6, 2026
Merged

docs(mix): consolidate chained widget modifiers #57

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
33 changes: 13 additions & 20 deletions src/content/documentation/mix/guides/widget-modifiers.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,17 +49,17 @@ Style properties like `.color()` and `.padding()` are resolved into a single wid

## Combining Multiple Modifiers

Chain `.wrap()` calls to apply several modifiers:
Chain modifiers inside a single `.wrap()` call:

```dart
final cardStyle = BoxStyler()
.color(Colors.white)
.size(200, 100)
.wrap(.opacity(0.9))
.wrap(.padding(.all(16)))
.wrap(.align(alignment: .center));
.wrap(.opacity(0.9).padding(.all(16)).align(alignment: .center));
```

This is equivalent to separate `.wrap()` calls. Both use Mix's default modifier order: `Align` → `Padding` → `Opacity` → `Box`.

## Modifier Ordering

### Default order
Expand All @@ -75,19 +75,15 @@ Mix does **not** apply modifiers in the order you chain them. Instead, it reorde
| 5. Visual transforms | `Transform`, `Scale`, `Rotate`, `Translate`, `Skew`, clips (`ClipOval`, `ClipRRect`, `ClipPath`, `ClipRect`, `ClipTriangle`) | Apply visual-only effects that don't affect layout |
| 6. Final effects | `Blur`, `Opacity`, `ShaderMask` | Apply transparency and post-processing last |

This means you can chain modifiers in any order and get consistent results:
For these distinct modifier types, changing their chain order inside `.wrap()` produces the same widget tree:

```dart
// These produce the same widget tree — Mix reorders them automatically
final a = BoxStyler()
.wrap(.opacity(0.5))
.wrap(.padding(.all(8)))
.wrap(.align(alignment: .center));
.wrap(.opacity(0.5).padding(.all(8)).align(alignment: .center));

final b = BoxStyler()
.wrap(.align(alignment: .center))
.wrap(.padding(.all(8)))
.wrap(.opacity(0.5));
.wrap(.align(alignment: .center).padding(.all(8)).opacity(0.5));

// Both result in:
// Align (phase 3)
Expand All @@ -101,15 +97,12 @@ final b = BoxStyler()
If the default pipeline doesn't fit your use case, you can override it with `.wrap(.orderOfModifiers(...))`:

```dart
final style = BoxStyler()
.wrap(.opacity(0.5))
.wrap(.padding(.all(8)))
.wrap(
.orderOfModifiers([
OpacityModifier, // Apply opacity first (innermost)
PaddingModifier, // Then padding (outermost)
]),
);
final style = BoxStyler().wrap(
.opacity(0.5).padding(.all(8)).orderOfModifiers([
OpacityModifier, // Outermost wrapper
PaddingModifier, // Inside Opacity, outside the Box
]),
);
```

Your custom order takes priority. Any modifiers not listed in your custom order fall back to their default position.
Expand Down
Loading