Box

Box is equivalent to Flutter's Container, it provides styling capabilities through the Mix framework. It can be used to create visually styled boxes with decoration, padding, margins, transforms, and constraints.

You can use BoxStyler to create styles with a fluent API. Example:

final style = BoxStyler()
    .size(200, 120)
    .color(Colors.blue)
    .borderRadius(.circular(12))
    .padding(.all(16))
    .shadow(
      .color(Colors.blue.shade200)
      .blurRadius(12)
      .offset(x: 0, y: 4),
    );

final label = TextStyler()
    .color(Colors.white)
    .fontSize(18)
    .fontWeight(.w600);

Box(
  style: style,
  child: StyledText('Hello Mix', style: label),
)

The preview below shows this style applied.

Interactive Preview

Resolving preview metadata...

Constructor

Prop	Type	Required / Default Value
`style`	`BoxStyler?`	Optional, defaults to `const BoxStyler.create()`
`styleSpec`	`StyleSpec<BoxSpec>?`	Optional (resolved style spec)
`child`	`Widget?`	Optional

Style API Reference

Box Methods

Method	Description
`clipBehavior`	Sets the clip behavior.
`alignment`	Sets the alignment.
`modifier`	Sets the widget modifier.
`foregroundDecoration`	Sets the foreground decoration.
`transform`	Sets the transform and optionally the alignment.
`constraints`	Sets the box constraints.
`padding`	Sets the padding.
`margin`	Sets the margin.
`decoration`	Sets the decoration.
`animate`	Sets the animation configuration.
`wrap`	Wraps with a widget modifier.
`borderRadius`	Sets the border radius.
`border`	Sets the border decoration.
`variants`	Sets the style variants.

Animation

Method	Description
`keyframeAnimation`	Creates a keyframe animation. It will animate through the given timeline.
`phaseAnimation`	Creates a phase animation. It will animate through the given phases.

Border Radius

Method	Description
`borderRadiusAll`	Sets border radius for all corners.
`borderRadiusTop`	Sets border radius for the top corners.
`borderRadiusBottom`	Sets border radius for the bottom corners.
`borderRadiusLeft`	Sets border radius for the left corners.
`borderRadiusRight`	Sets border radius for the right corners.
`borderRadiusTopLeft`	Sets border radius for the top left corner.
`borderRadiusTopRight`	Sets border radius for the top right corner.
`borderRadiusBottomLeft`	Sets border radius for the bottom left corner.
`borderRadiusBottomRight`	Sets border radius for the bottom right corner.
`borderRadiusTopStart`	Sets border radius for the top start corner (directional).
`borderRadiusTopEnd`	Sets border radius for the top end corner (directional).
`borderRadiusBottomStart`	Sets border radius for the bottom start corner (directional).
`borderRadiusBottomEnd`	Sets border radius for the bottom end corner (directional).
`borderRounded`	Sets a uniform circular radius for all corners.
`borderRoundedTop`	Sets a circular radius for the top corners.
`borderRoundedBottom`	Sets a circular radius for the bottom corners.
`borderRoundedLeft`	Sets a circular radius for the left corners.
`borderRoundedRight`	Sets a circular radius for the right corners.
`borderRoundedTopLeft`	Sets a circular radius for the top left corner.
`borderRoundedTopRight`	Sets a circular radius for the top right corner.
`borderRoundedBottomLeft`	Sets a circular radius for the bottom left corner.
`borderRoundedBottomRight`	Sets a circular radius for the bottom right corner.
`borderRoundedTopStart`	Sets a circular radius for the top start corner (directional).
`borderRoundedTopEnd`	Sets a circular radius for the top end corner (directional).
`borderRoundedBottomStart`	Sets a circular radius for the bottom start corner (directional).
`borderRoundedBottomEnd`	Sets a circular radius for the bottom end corner (directional).

Border

Method	Description
`borderTop`	Sets the top border.
`borderBottom`	Sets the bottom border.
`borderLeft`	Sets the left border.
`borderRight`	Sets the right border.
`borderStart`	Sets the start border (RTL-aware).
`borderEnd`	Sets the end border (RTL-aware).
`borderVertical`	Sets vertical borders (top & bottom).
`borderHorizontal`	Sets horizontal borders (left & right).
`borderAll`	Sets all borders.

Constraint

Method	Description
`width`	Sets both min and max width to create a fixed width
`height`	Sets both min and max height to create a fixed height
`minWidth`	Sets minimum width constraint
`maxWidth`	Sets maximum width constraint
`minHeight`	Sets minimum height constraint
`maxHeight`	Sets maximum height constraint
`size`	Sets both width and height to specific values
`constraintsOnly`	Creates constraints with only specified values, supporting priority resolution

Decoration

Method	Description
`color`	Sets background color
`gradient`	Sets gradient with any GradientMix type
`shadow`	Sets single shadow
`shadows`	Sets multiple shadows
`elevation`	Sets Material Design elevation shadow. Values: `one`, `two`, `three`, `four`, `six`, `eight`, `nine`, `twelve`, `sixteen`, `twentyFour`
`image`	Sets image decoration
`shape`	Sets box shape
`shapeCircle`	Sets a circular shape (CircleBorder)
`shapeStadium`	Sets a stadium shape (StadiumBorder)
`shapeRoundedRectangle`	Sets a rounded rectangle shape (RoundedRectangleBorder)
`shapeBeveledRectangle`	Sets a beveled rectangle shape (BeveledRectangleBorder)
`shapeContinuousRectangle`	Sets a continuous rectangle shape (ContinuousRectangleBorder)
`shapeStar`	Sets a star shape (StarBorder)
`shapeLinear`	Sets a linear border shape (LinearBorder)
`shapeSuperellipse`	Sets a superellipse shape (RoundedSuperellipseBorder)
`backgroundImage`	Sets a background image from an ImageProvider
`backgroundImageUrl`	Sets a background image from a network URL
`backgroundImageAsset`	Sets a background image from an asset path
`foregroundLinearGradient`	Sets a foreground linear gradient
`foregroundRadialGradient`	Sets a foreground radial gradient
`foregroundSweepGradient`	Sets a foreground sweep gradient
`linearGradient`	Sets a background linear gradient
`radialGradient`	Sets a background radial gradient
`sweepGradient`	Sets a background sweep gradient

Shadow

Method	Description
`shadowOnly`	Creates a single box shadow with named parameters
`boxShadows`	Creates multiple box shadows from a list of BoxShadowMix
`boxElevation`	Creates box shadows from Material Design elevation level

Spacing

Method	Description
`paddingTop`	Sets the top padding.
`paddingBottom`	Sets the bottom padding.
`paddingLeft`	Sets the left padding.
`paddingRight`	Sets the right padding.
`paddingX`	Sets horizontal (left and right) padding.
`paddingY`	Sets vertical (top and bottom) padding.
`paddingAll`	Sets padding on all sides.
`paddingStart`	Sets the start (leading) padding.
`paddingEnd`	Sets the end (trailing) padding.
`paddingOnly`	Sets custom padding for each side with priority resolution.
`marginTop`	Sets the top margin.
`marginBottom`	Sets the bottom margin.
`marginLeft`	Sets the left margin.
`marginRight`	Sets the right margin.
`marginX`	Sets horizontal (left and right) margin.
`marginY`	Sets vertical (top and bottom) margin.
`marginAll`	Sets margin on all sides.
`marginStart`	Sets the start (leading) margin.
`marginEnd`	Sets the end (trailing) margin.
`marginOnly`	Sets custom margin for each side with priority resolution.

Transform

Method	Description
`rotate`	Sets rotation transform
`scale`	Sets scale transform
`translate`	Sets translation transform
`skew`	Sets skew transform
`transformReset`	Resets transform to identity (no effect)

Variant

Method	Description
`variant`	Adds a single variant to this style.
`onDark`	Creates a variant for dark mode.
`onNot`	Creates a variant for when the context does NOT match the provided variant.
`onLight`	Creates a variant for light mode.
`onBuilder`	Creates a variant using a builder function that receives the build context.
`builder`	Deprecated: Use `onBuilder` instead.
`onBreakpoint`	Creates a variant based on the specified breakpoint.
`onPortrait`	Creates a variant for portrait device orientation.
`onLandscape`	Creates a variant for landscape device orientation.
`onMobile`	Creates a variant for mobile breakpoint.
`onTablet`	Creates a variant for tablet breakpoint.
`onDesktop`	Creates a variant for desktop breakpoint.
`onLtr`	Creates a variant for left-to-right text direction.
`onRtl`	Creates a variant for right-to-left text direction.
`onIos`	Creates a variant for iOS platform.
`onAndroid`	Creates a variant for Android platform.
`onMacos`	Creates a variant for macOS platform.
`onWindows`	Creates a variant for Windows platform.
`onLinux`	Creates a variant for Linux platform.
`onFuchsia`	Creates a variant for Fuchsia platform.
`onWeb`	Creates a variant for web platform.

Method	Description
`onHovered`	Creates a variant for hover state
`onPressed`	Creates a variant for pressed state
`onFocused`	Creates a variant for focused state (requires `PressableBox` or `Pressable` wrapper)
`onDisabled`	Creates a variant for disabled state
`onEnabled`	Creates a variant for enabled state (opposite of disabled)

FlexBox — flex layout with box styling
Styling with Mix — fluent Styler API patterns
Dynamic Styling — variants for hover, press, dark mode