Connected
A headless horizontally connected toggle row layout (Structure layer).
Arranges a list of generic items as a segmented toggle control where at most one item is selected at a time. Each item occupies an equal weight within the row and stretches to the tallest sibling via IntrinsicSize.Min. Outline edges and corner radii are computed automatically from each item's index: the first button rounds only its leading corners, the last button rounds only its trailing corners, and middle buttons have square corners. The actual rendering is delegated to the toggle lambda, which receives the pre-computed connection geometry and selection state.
This component makes no visual or interactive decisions — no colors, elevation, or animation. It is the headless backbone that the Stylish Finish counterpart StylishConnectedToggleRow consumes by supplying a styled toggle. Supply your own toggle to render a custom skin over the same connected geometry.
Parameters
The list of items to display as toggle segments.
The index of the currently selected item, or null if no item is selected.
Callback invoked with the index of the tapped item. The callback receives the new index regardless of whether it matches the current selection; consumers decide whether to allow deselection.
The modifier applied to the root Row.
The radius applied to the outer corners of the first and last items. Defaults to StylishTheme.dimensions.connectedCornerRadius (12 dp).
The horizontal gap between adjacent items. Defaults to StylishTheme.dimensions.connectedSpacing (3 dp).
A composable lambda that renders a single toggle item. Receives the item data, its index, whether it is currently selected, a modifier (including weight and fill-max-height), the connected Shape, the outline ConnectedEdges, and the outline ConnectedCorners.
Type Parameters
The type of each item in the row.