Skip to main content
The Stac Wrap allows you to build a Flutter Wrap widget using JSON. To know more about the wrap widget in Flutter, refer to the official documentation.

​
Properties

PropertyTypeDescription
directionStacAxisThe direction to use as the main axis.
alignmentStacWrapAlignmentHow the children within a run should be placed in the main axis.
spacingdoubleHow much space to place between children in a run in the main axis.
runAlignmentStacWrapAlignmentHow the runs themselves should be placed in the cross axis.
runSpacingdoubleHow much space to place between the runs themselves in the cross axis.
crossAxisAlignmentStacWrapCrossAlignmentHow the children within a run should be aligned relative to each other in the cross axis.
textDirectionStacTextDirectionDetermines the order to lay children out horizontally and how to interpret start and end in the horizontal direction.
verticalDirectionStacVerticalDirectionDetermines the order to lay children out vertically and how to interpret start and end in the vertical direction.
clipBehaviorStacClipThe content will be clipped (or not) according to this option.
childrenList<StacWidget>The widgets below this widget in the tree.

​
Example

StacWrap(
  spacing: 8.0,
  runSpacing: 4.0,
  children: [
    StacContainer(
      color: StacColors.red,
      width: 100,
      height: 100,
      child: StacCenter(child: StacText(data: '1', style: StacTextStyle(color: StacColors.white))),
    ),
    StacContainer(
      color: StacColors.pink,
      width: 100,
      height: 100,
      child: StacCenter(child: StacText(data: '2', style: StacTextStyle(color: StacColors.white))),
    ),
    StacContainer(
      color: StacColors.purple,
      width: 100,
      height: 100,
      child: StacCenter(child: StacText(data: '3', style: StacTextStyle(color: StacColors.white))),
    ),
    StacContainer(
      color: StacColors.deepPurple,
      width: 100,
      height: 100,
      child: StacCenter(child: StacText(data: '4', style: StacTextStyle(color: StacColors.white))),
    ),
  ],
)