ComponentsList ChoiceThe List Choice component offers users a selection interface presented in a list format. It provides variations to accommodate different use cases and user preferences, such as including descriptions, icons, buttons, or checkboxes within each list item.
Guidelines
Web
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
If there is a question mark ? in the Data Type.
| Properties | Data Type | Description | Default Value |
|---|---|---|---|
| title | String? | Displays title of choice | null |
| subTitle | String? | Displays subtitle of choice | null |
| icon | IconData? | Displays a prefix icon | null |
| hasIntroduceDismissable | bool? | Optional to displays introduction usage for dismissible widget | false |
| suffixButton | UIChoiceButton? | Displays a suffix button | null |
| checkbox | UICheckboxButton? | Displays a checkbox | null |
| onConfirmDismiss | UIConfirmDismiss? | Callback confirmation dismiss | null |
| onDismissed | UIOnDismissed? | Callback dismissible | null |
| onTap | VoidCallback? | Callback when user pressed/tap the choice item | null |
Previews & Code
You can call the components with Class.namedConstructor() with different variants
UIChoice
UIChoice(
key: UniqueKey(), //Required
title: 'Label',
subTitle: 'Label',
icon: Icons.abc,
hasIntroduceDismissable: false,
checkbox: UIChoiceCheckbox(
value: true,
onChanged: (bool? value){
// Do something
}
),
onConfirmDismiss: (DismissDirection direction){
// Do something
return false;
},
onDismissed: (DismissDirection direction){
// Do something
},
onTap: (){
// Do something
}
)