FlexBox

FlexBox combines Flutter's Container and Flex widgets with Mix styling.

It provides both box styling (decoration, padding, margins, transforms, constraints) and flex layout capabilities (direction, alignment, spacing) in a single widget. This makes it ideal for creating styled flex layouts without nesting multiple widgets.

For specific layouts, use RowBox for horizontal layouts or ColumnBox for vertical layouts.

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

final flexStyle = FlexBoxStyler()
    .mainAxisSize(.min)
    .spacing(4)
    .color(Colors.cyan.shade50)
    .padding(.symmetric(horizontal: 10, vertical: 4))
    .borderRadius(.circular(99))
    .border(.color(Colors.cyan.shade600).width(2));

final iconStyle = IconStyler()
    .icon(Icons.ac_unit_rounded)
    .color(Colors.cyan.shade600)
    .size(18);

final textStyle = TextStyler()
    .fontSize(16)
    .fontWeight(.w500)
    .color(Colors.cyan.shade700);

RowBox(
  style: flexStyle,
  children: [
    StyledIcon(style: iconStyle),
    StyledText('Snow', style: textStyle),
  ],
)

Interactive Preview

Resolving preview metadata...

Constructor

Prop	Type	Required / Default Value
`style`	`FlexBoxStyler?`	Optional, defaults to `const FlexBoxStyler.create()`
`styleSpec`	`StyleSpec<FlexBoxSpec>?`	Optional
`children`	`List<Widget>`	Optional, defaults to `const <Widget>[]`

Style API Reference

FlexBox Methods

Method	Description
`animate`	Sets the animation property.
`alignment`	Sets the alignment property.
`transformAlignment`	Sets the transform alignment.
`clipBehavior`	Sets the clip behavior.
`gap`	Sets gap value (deprecated).
`modifier`	Sets the widget modifier.
`foregroundDecoration`	Sets the foreground decoration.
`flex`	Sets the flex property.
`padding`	Sets the padding property.
`margin`	Sets the margin property.
`transform`	Sets the transform property.
`decoration`	Sets the decoration property.
`constraints`	Sets the constraints property.
`wrap`	Sets the widget modifier (wrap).
`variants`	Sets the variants list.
`borderRadius`	Sets the border radius property via decoration.
`border`	Sets the border property via decoration.

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 elevation shadow
`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

Flex

Method	Description
`direction`	Sets flex direction
`mainAxisAlignment`	Sets main axis alignment
`crossAxisAlignment`	Sets cross axis alignment
`mainAxisSize`	Sets main axis size
`verticalDirection`	Sets vertical direction
`textDirection`	Sets text direction
`textBaseline`	Sets text baseline
`spacing`	Sets spacing
`row`	Convenience method for setting direction to horizontal (row)
`column`	Convenience method for setting direction to vertical (column)

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 `Pressable` or `PressableBox` wrapper for focus tracking.
`onDisabled`	Creates a variant for disabled state
`onEnabled`	Creates a variant for enabled state (opposite of disabled)

Box — BoxStyler API for standalone containers
Styling with Mix — fluent Styler API basics
Dynamic Styling — variants for hover, press, dark mode