Divider - Stac

The Stac Divider allows you to build a Flutter Divider widget using JSON. It creates a thin horizontal line with padding on either side. To know more about the Divider widget in Flutter, refer to the official documentation.

Properties

Property	Type	Description
height	`double`	The divider’s height extent (total space occupied).
thickness	`double`	The thickness of the line drawn within the divider.
indent	`double`	The amount of empty space to the leading edge.
endIndent	`double`	The amount of empty space to the trailing edge.
color	`StacColor`	The color to use when painting the line.

Example

Dart
JSON
Preview

StacDivider(
  thickness: 2.0,
  color: StacColors.red,
  indent: 16.0,
  endIndent: 16.0,
)

{
  "type": "divider",
  "thickness": 2,
  "color": "#FF0000",
  "indent": 16,
  "endIndent": 16
}

Divider in a List

StacColumn(
  children: [
    StacListTile(
      title: StacText(data: 'Item 1'),
    ),
    StacDivider(
      height: 1.0,
      thickness: 1.0,
      color: StacColors.grey,
    ),
    StacListTile(
      title: StacText(data: 'Item 2'),
    ),
    StacDivider(
      height: 1.0,
      thickness: 1.0,
      color: StacColors.grey,
    ),
    StacListTile(
      title: StacText(data: 'Item 3'),
    ),
  ],
)

{
  "type": "column",
  "children": [
    {
      "type": "listTile",
      "title": { "type": "text", "data": "Item 1" }
    },
    {
      "type": "divider",
      "height": 1.0,
      "thickness": 1.0,
      "color": "#E0E0E0"
    },
    {
      "type": "listTile",
      "title": { "type": "text", "data": "Item 2" }
    },
    {
      "type": "divider",
      "height": 1.0,
      "thickness": 1.0,
      "color": "#E0E0E0"
    },
    {
      "type": "listTile",
      "title": { "type": "text", "data": "Item 3" }
    }
  ]
}