ComponentsChoice TileChoice tiles are usually small boxes or rectangles containing text, images, or icons that represent the options available to the user.
Guidelines
Web
Oops Sorry! This Page Is Under Maintenance
We are improving this page, and will be back soon! You can explore other page.
Mobile
Resources
- You can use these components by accessing the provided resource files.
- Preview animations are examples and may not suit Mobile Widgets. Press 'View Code' to access the Widgetbook Playground and see the Flutter widget displaying all created components and interactive.
Usage
Import this line to your file:
import 'package:buma_design_system/buma_design_system.dart';
Attributes of all variants
If there is a question mark ? in the Data Type, it means that the properties are optional, this is namedConstructor from UIChoiceTile or UIOptionTile
This widget will displays different content, and usually displays small boxes or rectangles containing text, images, or icons that represent the options available to the user.
The option tile can select multiple value and make selected value when user has gesture or tapped the card of option tile.
UIChoiceTile
| Properties | Data Type | Description |
|---|---|---|
| value | T? | The value associated with this choice tile |
| groupValue | T | The value of the group that this choice tile belongs to |
| icon | IconData? | The icon to display in the choice tile |
| title | String? | The main title text of the choice tile |
| subTitle | String? | The subtitle text of the choice tile |
| bottomLabel | String | The bottom label text of the choice tile |
| child | Widget? | A custom widget to display within the choice tile |
| onTap | VoidCallback? | The callback function to be called when the choice tile is tapped |
UIChoiceTile.center
| Properties | Data Type | Description |
|---|---|---|
| value | T? | The value associated with this choice tile |
| groupValue | T | The value of the group that this choice tile belongs to |
| title | String? | The main title text of the choice tile |
| subTitle | String? | The subtitle text of the choice tile |
| status | String? | The status text of the choice tile |
| child | Widget? | A custom widget to display within the choice tile |
| onTap | VoidCallback? | The callback function to be called when the choice tile is tapped |
UIOptionTile.primary
| Properties | Data Type | Description | Default Value |
|---|---|---|---|
| title | UILabel? | Displays custom title | null |
| subtitle | UILabel? | Displays custom subtitle | null |
| titleText | String? | Displays text of title | null |
| subtitleText | String? | Displays text of subtitle | null |
| isSelected | bool | The condition when user selected the option tile | false |
| hasPrefixCheckbox | bool? | Displays a checkbox in the left of content option tile | false |
| hasSuffixCheckbox | bool? | Displays a checkbox in the right of content option tile | false |
| prefix | Widget? | Displays a custom widget to the left of the content options tile | null |
| suffix | Widget? | Displays a custom widget to the right of the content options tile | null |
| isCenteredLabel | bool | Make the title and subTitle alignment center | false |
| onTap | VoidCallback? | The callback when user has interaction to the option tile | null |
UIOptionTile.secondary
| Properties | Data Type | Description | Default Value |
|---|---|---|---|
| titleText | String? | Displays text of title | null |
| isSelected | bool | The condition when user selected the option tile | false |
| icon | IconData? | Displays icon in the center of content of UIOptionTileVariant.secondary | null |
| isCenteredLabel | bool | Make the title and subTitle alignment center | false |
| onTap | VoidCallback? | The callback when user has interaction to the option tile | null |
UIOptionTile.item
| Properties | Data Type | Description | Default Value |
|---|---|---|---|
| title | UILabel? | Displays custom title | null |
| subtitle | UILabel? | Displays custom subtitle | null |
| titleText | String? | Displays text of title | null |
| subtitleText | String? | Displays text of subtitle | null |
| prefix | Widget? | Displays a custom widget to the left of the content options tile | null |
| suffix | Widget? | Displays a custom widget to the right of the content options tile | null |
| isCenteredLabel | bool | Make the title and subTitle alignment center | false |
| onTap | VoidCallback? | The callback when user has interaction to the option tile | null |
UIOptionTIle.dropdown
| Properties | Data Type | Description | Default Value |
|---|---|---|---|
| titleText | String? | Displays text of title | null |
| subtitleText | String? | Displays text of subtitle | null |
| suffix | Widget? | Displays a custom widget to the right of the content options tile | null |
| isCenteredLabel | bool | Make the title and subTitle alignment center | false |
| listDropDown | List<UIOptionTileDropDownItem>? | The list of dropdown items option tile | [] |
| onTapDropDown | ValueChanged<UIOptionTileDropDownItem>? | The callback when user has interaciton to the dropdown | null |
Previews & Code
You can call the components with Class.namedConstructor() with different variants.