Segmented Control

segmented control

Segmented controls allow users to make a single selection from a set of options. Like buttons, segments can contain text, icons or both.

Usage

List<XelaSegmentedControlItem> items = [
  XelaSegmentedControlItem(id: "1", label: "Day"),
  XelaSegmentedControlItem(id: "2", label: "Week"),
  XelaSegmentedControlItem(id: "3", label: "Month"),
  XelaSegmentedControlItem(id: "4", label: "Year"),
];

XelaSegmentedControl(
  items: items,
  autoResize: false,
  primaryBackground: XelaColor.Yellow3,
  secondaryBackground: XelaColor.Gray12,
  primaryFontColor: XelaColor.Gray2,
  secondaryFontColor: XelaColor.Gray2,
)

Properties XelaSegmentedControll

Name Type Default Value Required Description
items List <XelaSegmentedControlItem> - YES Segmented Controll items
segmentedControlValue Int 0 NO Selected item value
onChange Function(XelaSegmentedControlItem)? - YES On selected Item change func
primaryBackground Color XelaColor.Blue6 NO Primary - accent - selected background color
secondaryBackground Color XelaColor.Gray12 NO Secondary background color
primaryFontColor Color Colors.white NO Primary - accent - selected font color
secondaryFontColor Color XelaColor.Gray2 NO Secondary font color
autoResize bool false NO Auto resize items width

Properties XelaSegmentedControllItem

Name Type Default Value Required Description
id String - YES Item unique ID
label String? null NO Item label text
iconActive Widget? null NO Item active icon widget
iconInactive Widget? null NO Item inactive icon widget