API reference

FlexBoxScope Class

Modifiers: final

Scope for building children inside a FlexBox layout.

Provides builder methods for all supported display component types: FlexBoxScope.flexBox, FlexBoxScope.image, FlexBoxScope.text, FlexBoxScope.button, and FlexBoxScope.icon. Each child component can optionally specify flex layout properties (flexGrow, flexShrink, alignSelf) to control how it is sized and positioned within the parent FlexBox.

Since FlexBoxScope.flexBox accepts a lambda with a receiver scope, you can extract reusable pieces as extension functions and compose them together:

// Define reusable building blocks as extension functions on FlexBoxScope.
fun FlexBoxScope.header(title: String) {
    text(title, style = TextStyle.HEADING)
}
fun FlexBoxScope.mediaRow(iconName: String, label: String) {
    flexBox(direction = Direction.ROW, gap = 8, crossAlignment = Alignment.CENTER) {
        icon(name = iconName, style = IconStyle.FILLED)
        text(label, style = TextStyle.BODY)
    }
}
// Compose them inside any flexBox { } block.
display.sendContent {
    flexBox(direction = Direction.COLUMN, gap = 8) {
        header("Now Playing")
        mediaRow("headphones", "My Song")
        button(label = "Stop", style = ButtonStyle.SECONDARY)
    }
}

Signature

class FlexBoxScope

Methods

button ( label , style , iconName , onClick , flexGrow , flexShrink , alignSelf )	Adds a button component as a child. Displays a tappable button on the wearable display. Buttons can optionally include an icon alongside the label and respond to tap events via onClick. Signature fun button(label: String, style: ButtonStyle = ButtonStyle.PRIMARY, iconName: IconName? = null, onClick: () -> Unit? = null, flexGrow: Float = 0.0f, flexShrink: Float = 0.0f, alignSelf: Alignment? = null) Parameters `label: String` The button text. `style: ButtonStyle` Visual style preset for the button. Defaults to ButtonStyle.PRIMARY. `iconName: IconName?` Optional icon name to display alongside the label. `onClick: Function0?` Optional callback invoked when the button is tapped on the wearable. `flexGrow: Float` How much this child should grow relative to siblings. Defaults to 0. `flexShrink: Float` How much this child should shrink relative to siblings. Defaults to 0. `alignSelf: Alignment?` Overrides the parent's cross-axis alignment for this child.
buttonGroup ( alignment , flexGrow , flexShrink , alignSelf , block )	Adds a button group as a child. A button group arranges its ButtonGroupScope.buttons horizontally and, on smartglass, keeps each unfocused icon button collapsed to its icon while widening the focused one to reveal its label. Prefer this over a FlexBoxScope.flexBox row of buttons when you want that focus-driven reveal. Signature fun buttonGroup(alignment: ButtonGroupAlignment = ButtonGroupAlignment.CENTER, flexGrow: Float = 0.0f, flexShrink: Float = 0.0f, alignSelf: Alignment? = null, block: ButtonGroupScope.() -> Unit) Parameters `alignment: ButtonGroupAlignment` How the buttons are positioned within the group. Defaults to ButtonGroupAlignment.CENTER. `flexGrow: Float` How much this child should grow relative to siblings. Defaults to 0. `flexShrink: Float` How much this child should shrink relative to siblings. Defaults to 0. `alignSelf: Alignment?` Overrides the parent's cross-axis alignment for this child. `block: Function1` Builder block for adding buttons to the group.
flexBox ( direction , gap , alignment , crossAlignment , wrap , padding , paddingTop , paddingBottom , paddingStart , paddingEnd , background , onClick , flexGrow , flexShrink , alignSelf , block )	Adds a nested FlexBox layout as a child. Creates a flexible layout within the current FlexBox. Individual padding params override the uniform padding value when set. Signature fun flexBox(direction: Direction = Direction.COLUMN, gap: Int = 0, alignment: Alignment = Alignment.START, crossAlignment: Alignment = Alignment.START, wrap: Boolean = false, padding: Int = 0, paddingTop: Int? = null, paddingBottom: Int? = null, paddingStart: Int? = null, paddingEnd: Int? = null, background: FlexBoxBackground = FlexBoxBackground.NONE, onClick: () -> Unit? = null, flexGrow: Float = 0.0f, flexShrink: Float = 0.0f, alignSelf: Alignment? = null, block: FlexBoxScope.() -> Unit) Parameters `direction: Direction` The layout direction for children. Defaults to Direction.COLUMN. `gap: Int` Spacing in pixels between children. Defaults to 0. `alignment: Alignment` Alignment of children along the main axis. Defaults to Alignment.START. `crossAlignment: Alignment` Alignment of children along the cross axis. Defaults to Alignment.START. `wrap: Boolean` Whether children should wrap to the next line when they exceed the available space. `padding: Int` Uniform padding in pixels applied to all sides. Defaults to 0. `paddingTop: Int?` Padding for the top edge. Overrides padding when set. `paddingBottom: Int?` Padding for the bottom edge. Overrides padding when set. `paddingStart: Int?` Padding for the start edge. Overrides padding when set. `paddingEnd: Int?` Padding for the end edge. Overrides padding when set. `background: FlexBoxBackground` Optional background treatment. Defaults to FlexBoxBackground.NONE. `onClick: Function0?` Optional callback invoked when this FlexBox is tapped on the wearable. `flexGrow: Float` How much this child should grow relative to siblings. Defaults to 0 (no growth). `flexShrink: Float` How much this child should shrink relative to siblings. Defaults to 0. `alignSelf: Alignment?` Overrides the parent's crossAlignment for this child. Defaults to null. `block: Function1` Builder block for adding child components.
icon ( name , style , flexGrow , flexShrink , alignSelf )	Adds an icon component as a child. Displays an icon on the wearable display. Signature fun icon(name: IconName, style: IconStyle = IconStyle.FILLED, flexGrow: Float = 0.0f, flexShrink: Float = 0.0f, alignSelf: Alignment? = null) Parameters `name: IconName` The icon name. `style: IconStyle` Whether the icon is filled or outlined. Defaults to IconStyle.FILLED. `flexGrow: Float` How much this child should grow relative to siblings. Defaults to 0. `flexShrink: Float` How much this child should shrink relative to siblings. Defaults to 0. `alignSelf: Alignment?` Overrides the parent's cross-axis alignment for this child.
image ( uri , bitmap , sizePreset , cornerRadius , flexGrow , flexShrink , alignSelf )	Adds an image component as a child. Displays an image on the wearable display, sourced from either a remote uri or a local bitmap. Provide exactly one of uri or bitmap. A bitmap is sent inline so it renders without network access on the wearable: the SDK downscales it to the display bounds (preserving aspect ratio) and encodes it into the payload. Prefer a remote uri for large or photographic images so the bytes are streamed by the wearable instead of inlined. Signature fun image(uri: String? = null, bitmap: Bitmap?, sizePreset: ImageSize = ImageSize.FILL, cornerRadius: CornerRadius = CornerRadius.NONE, flexGrow: Float = 0.0f, flexShrink: Float = 0.0f, alignSelf: Alignment? = null) Parameters `uri: String?` The URI of the image to display (e.g. an `https` URL, a `data:` URI, or a `drawable://` reference). `bitmap: Bitmap?` A local bitmap to send inline, downscaled to the display and encoded by the SDK. `sizePreset: ImageSize` How the image should be sized. Defaults to ImageSize.FILL. `cornerRadius: CornerRadius` Corner rounding preset. Defaults to CornerRadius.NONE. `flexGrow: Float` How much this child should grow relative to siblings. Defaults to 0. `flexShrink: Float` How much this child should shrink relative to siblings. Defaults to 0. `alignSelf: Alignment?` Overrides the parent's cross-axis alignment for this child.
text ( content , style , color , flexGrow , flexShrink , alignSelf )	Adds a text component as a child. Displays styled text content on the wearable display. Signature fun text(content: String, style: TextStyle = TextStyle.BODY, color: TextColor = TextColor.PRIMARY, flexGrow: Float = 0.0f, flexShrink: Float = 0.0f, alignSelf: Alignment? = null) Parameters `content: String` The text string to display. `style: TextStyle` Typography preset for the text. Defaults to TextStyle.BODY. `color: TextColor` Color preset for the text. Defaults to TextColor.PRIMARY. `flexGrow: Float` How much this child should grow relative to siblings. Defaults to 0. `flexShrink: Float` How much this child should shrink relative to siblings. Defaults to 0. `alignSelf: Alignment?` Overrides the parent's cross-axis alignment for this child.

FlexBoxScope Class

See Also

Signature

Methods