Stylish
A grid of connected buttons laid out in equal-width cells across a fixed number of columns, with shared outlines and corner radii.
This is the Finish-layer component: it supplies the Stylish button rendering (DefaultStylishConnectedButton) to the headless Structure layout ConnectedButtonGrid, which owns arrangement and connection geometry. Items are chunked into rows of columns buttons; within each row every button receives equal weight and stretches to the tallest sibling. Outline edges are drawn on all four sides of every cell; corner radii are computed automatically from each item's absolute index so that only the four outer corners of the entire grid are rounded. When the final row has fewer items than columns, the remaining buttons stretch via equal weight to fill the full row width. Items whose StylishConnectedButtonItem.onClick is null or whose StylishConnectedButtonItem.enabled is false are rendered in a disabled state and do not respond to interaction. Pass a custom button to override the Stylish rendering while keeping the connected geometry.
Parameters
The list of StylishConnectedButtonItem data objects that describe each button's content, click action, colors, and enabled state.
The number of equal-width columns in the grid. Must be greater than zero.
The radius applied to the outer corners of the grid. Defaults to StylishTheme.dimensions.connectedCornerRadius (12 dp).
The gap between adjacent buttons both horizontally and vertically. Defaults to StylishTheme.dimensions.connectedSpacing (3 dp).
The inner padding of each button. Defaults to 12 dp horizontal and 12 dp vertical.
The ButtonColors used for every item whose StylishConnectedButtonItem.colors is null.
A composable lambda that renders a single button. Receives the item data, a modifier (including weight and fill-max-height), the connected Shape, the outline ConnectedEdges, and the outline ConnectedCorners. Defaults to DefaultStylishConnectedButton, dressed in the Stylish look with cornerRadius, contentPadding, and defaultColors.