Skip to main content

​
Wrap

Stac wrap allows you to build the Flutter wrap widget using JSON To know more about the wrap widget in Flutter, refer to the official documentation.

​
Properties

PropertyTypeDescription
AxisAxisThe direction to use as the main axis.
alignmentWrapAlignmentHow 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.
runAlignmentWrapAlignmentHow the runs themselves should be placed in the cross axis.
runSpacingdoubleHow much space to place between the runs themselves in the cross axis.
crossAxisAlignmentWrapCrossAxisAlignmentHow the children within a run should be aligned relative to each other in the cross axis.
textDirectionTextDirectionDetermines the order to lay children out horizontally and how to interpret start and end in the horizontal direction.
verticalDirectionVerticalDirectionDetermines the order to lay children out vertically and how to interpret start and end in the vertical direction.
clipBehaviorClipThe content will be clipped (or not) according to this option.
childrenList<Map<String, dynamic>>The widgets below this widget in the tree.

​
Example JSON

{
      "type": "wrap",
      "spacing": 8.0,
      "runSpacing": 4.0,
      "children": [
        {
          "type": "container",
          "color": "#FFCDD2",
          "width": 100,
          "height": 100,
          "child": {
            "type": "center",
            "child": {
              "type": "text",
              "data": "1",
              "style": {
                "color": "#FFFFFF"
              }
            }
          }
        },
        {
          "type": "container",
          "color": "#F8BBD0",
          "width": 100,
          "height": 100,
          "child": {
            "type": "center",
            "child": {
              "type": "text",
              "data": "2",
              "style": {
                "color": "#FFFFFF"
              }
            }
          }
        },
        {
          "type": "container",
          "color": "#E1BEE7",
          "width": 100,
          "height": 100,
          "child": {
            "type": "center",
            "child": {
              "type": "text",
              "data": "3",
              "style": {
                "color": "#FFFFFF"
              }
            }
          }
        },
        {
          "type": "container",
          "color": "#D1C4E9",
          "width": 100,
          "height": 100,
          "child": {
            "type": "center",
            "child": {
              "type": "text",
              "data": "4",
              "style": {
                "color": "#FFFFFF"
              }
            }
          }
        },
      ]
    }
⌘I