ResponsiveRow

A row whose children reflow across a responsive grid, like Bootstrap's grid system. Each child occupies a number of columns out of columns (12 by default), and that span can change per breakpoint as the window resizes. Mirrors Flet's ResponsiveRow.

responsive_row is a core control — no extension is required.

Example

responsive_row(
  spacing: 10,
  run_spacing: 10,
  columns: 12,
  children: [
    # Full width on phones, half on tablets, a third on desktops.
    container(col: { "xs" => 12, "sm" => 6, "md" => 4 }, content: text("A")),
    container(col: { "xs" => 12, "sm" => 6, "md" => 4 }, content: text("B")),
    container(col: { "xs" => 12, "sm" => 12, "md" => 4 }, content: text("C"))
  ]
)

A fixed split (sidebar + content):

responsive_row(
  children: [
    container(col: 4, content: text("Sidebar")),
    container(col: 8, content: text("Content"))
  ]
)

The first positional argument is the children array, so responsive_row([...]) and responsive_row(children: [...]) are equivalent.

The col property (on children)

Children control their own span with the col property:

• An integer (col: 6) — the same span at every breakpoint.
• A hash (col: { "sm" => 6, "md" => 4 }) — a span per breakpoint. A breakpoint

applies at its width and up until the next one is set, so omitted breakpoints inherit the nearest smaller one.

If a child has no col, it spans all columns.

Breakpoints

breakpoints maps a name to the minimum viewport width (in pixels) at which it applies. The defaults follow Bootstrap:

| Name | Min width | |-------|-----------| | xs | 0 | | sm | 576 | | md | 768 | | lg | 992 | | xl | 1200 | | xxl | 1400 |

Override them by passing your own map:

responsive_row(
  breakpoints: { "xs" => 0, "sm" => 600, "md" => 900 },
  children: responsive_children
)

Properties

• controls — the child controls (also accepted as the first positional

argument).

• columns — the total number of grid columns (default 12).
• spacing — horizontal gap between children in the same run (default 10).
• run_spacing — vertical gap between wrapped runs (default 10).
• alignment — horizontal alignment of children within a run ("start",

"center", "end", "space_between", "space_around", "space_evenly").

• vertical_alignment — cross-axis alignment of children ("start",

"center", "end", "stretch").

• breakpoints — the breakpoint → min-width map described above.
• expand — fill the available space in a column.
• width / height — fixed size when not expanding.
• tooltip, visible, opacity, rtl, disabled, animate_* — the usual

layout properties.

Events

• on_size_change — the control's size changed.
• on_animation_end — an animate_* transition finished.

Reference

• Family: shared
• Widget type: responsiverow
• Helper: responsive_row

Complete API

Helpers

• responsive_row(children = ..., **props, &block)
• responsiverow(children = ..., **props, &block)

Accepted properties

• adaptive — Adapts to the platform (Material/Cupertino) when true.
• align — Alignment of the control within its parent.
• alignment — Alignment of the content within the control.
• animate_align — Animates alignment changes.
• animate_margin — Animates margin changes.
• animate_offset — Animates offset changes.
• animate_opacity — Animates opacity changes.
• animate_position — Animates position changes.
• animate_rotation — Animates rotation changes.
• animate_scale — Animates scale changes.
• animate_size — Animates size changes.
• aspect_ratio — Width-to-height ratio to maintain.
• badge — Badge drawn on the corner of the control.
• bottom — Bottom offset when positioned inside a stack.
• breakpoints — Sets the breakpoints property.
• col — Responsive column span (1-12) per breakpoint.
• columns — Sets the columns property.
• controls — The list of child controls.
• data — Arbitrary value you can attach to the control and read back in handlers.
• disabled — Disables interaction when true.
• expand — Fills the available space along the parent's main axis when true.
• expand_loose — Like expand, but only grows up to the child's natural size.
• height — Fixed height in logical pixels.
• key — Stable identity used to preserve state across rebuilds.
• left — Left offset when positioned inside a stack.
• margin — Outer spacing around the control.
• offset — Translation offset applied to the control.
• opacity — Opacity from 0.0 (transparent) to 1.0 (opaque).
• right — Right offset when positioned inside a stack.
• rotate — Rotation applied to the control.
• rtl — Renders right-to-left when true.
• run_spacing — Sets the run spacing property.
• scale — Scale transform applied to the control.
• size_change_interval — Throttle interval for on_size_change, in ms.
• spacing — Sets the spacing property.
• tooltip — Text shown on hover/long-press.
• top — Top offset when positioned inside a stack.
• vertical_alignment — Vertical alignment.
• visible — Hides the control when false.
• width — Fixed width in logical pixels.

Events

• on_animation_end — Fired when an animation completes.
• on_size_change — Fired when the control's size changes.

Wire reference

• Family: shared
• Widget type: responsiverow