OudsDivider class

OUDS Divider design guidelines

Reference design version : 1.0.0

Divider is a UI element that allows to structure the content by visually separating the content zones. Divider improves readability and content organization without introducing a stronger visual hierarchy like a heading or a container would.

You can choose the orientation by using one of the named constructors:

• OudsDivider.horizontal
• OudsDivider.vertical

The following parameters are available:

• color The color of the divider, chosen from the OudsDividerColor enum. Default value set to OudsDividerColor.defaultColor.
• length The length of the divider (width for horizontal, height for vertical). Defaults to double.infinity for horizontal and 0 for vertical.
• thickness The thickness of the divider (height for horizontal, width for vertical).
• margin Optional margin around the divider, for spacing from surrounding content.

You can use OudsDivider component in your project, customizing parameters as needed :

Divider horizontal with default color :

Separates stacked vertical sections. Example use case: Between main content and a footer.

OudsDivider.horizontal(
      color: OudsDividerColor.defaultColor
      )

Divider vertical with default color :

Separates horizontally aligned elements. Example use case: Between two columns in a layout.

OudsDivider.vertical(
      color: OudsDividerColor.defaultColor
      )