Wrap

Documentation for Wrap

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

Property	Type	Description
direction	StacAxis	The direction to use as the main axis.
alignment	StacWrapAlignment	How the children within a run should be placed in the main axis.
spacing	double	How much space to place between children in a run in the main axis.
runAlignment	StacWrapAlignment	How the runs themselves should be placed in the cross axis.
runSpacing	double	How much space to place between the runs themselves in the cross axis.
crossAxisAlignment	StacWrapCrossAlignment	How the children within a run should be aligned relative to each other in the cross axis.
textDirection	StacTextDirection	Determines the order to lay children out horizontally and how to interpret start and end in the horizontal direction.
verticalDirection	StacVerticalDirection	Determines the order to lay children out vertically and how to interpret start and end in the vertical direction.
clipBehavior	StacClip	The content will be clipped (or not) according to this option.
children	List<StacWidget>	The widgets below this widget in the tree.

Example

Dart

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))),
    ),
  ],
)

JSON

{
  "type": "wrap",
  "spacing": 8,
  "runSpacing": 4,
  "children": [
    {
      "type": "container",
      "color": "#FFF44336",
      "width": 100,
      "height": 100,
      "child": {
        "type": "center",
        "child": {
          "type": "text",
          "data": "1",
          "style": {
            "color": "#FFFFFFFF"
          }
        }
      }
    },
    {
      "type": "container",
      "color": "#FFE91E63",
      "width": 100,
      "height": 100,
      "child": {
        "type": "center",
        "child": {
          "type": "text",
          "data": "2",
          "style": {
            "color": "#FFFFFFFF"
          }
        }
      }
    },
    {
      "type": "container",
      "color": "#FF9C27B0",
      "width": 100,
      "height": 100,
      "child": {
        "type": "center",
        "child": {
          "type": "text",
          "data": "3",
          "style": {
            "color": "#FFFFFFFF"
          }
        }
      }
    },
    {
      "type": "container",
      "color": "#FF673AB7",
      "width": 100,
      "height": 100,
      "child": {
        "type": "center",
        "child": {
          "type": "text",
          "data": "4",
          "style": {
            "color": "#FFFFFFFF"
          }
        }
      }
    }
  ]
}

Preview