https://github.com/ecrax/category_picker
An input widget to handle selection of category like choices.
https://github.com/ecrax/category_picker
category-picker dart dartlang flutter flutter-package input widget
Last synced: about 2 months ago
JSON representation
An input widget to handle selection of category like choices.
- Host: GitHub
- URL: https://github.com/ecrax/category_picker
- Owner: ecrax
- License: gpl-3.0
- Created: 2021-01-09T12:07:02.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-01-10T09:20:05.000Z (over 5 years ago)
- Last Synced: 2025-04-06T10:37:12.916Z (about 1 year ago)
- Topics: category-picker, dart, dartlang, flutter, flutter-package, input, widget
- Language: Dart
- Homepage: https://pub.dev/packages/category_picker
- Size: 264 KB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# category_picker
An input widget to handle selection of category like choices.
## Usage
To use this widget simply add category_picker as a dependency to your project in the pubspec.yaml file and import it if needed.
### Example
(Barebone)
```dart
import 'package:category_picker/category_picker.dart';
import 'package:category_picker/category_picker_item.dart';
```
```dart
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: CategoryPicker(
items: [
CategoryPickerItem(
value: "Test",
),
CategoryPickerItem(
value: "Test2",
),
CategoryPickerItem(
value: "Test3",
),
],
onValueChanged: (value) {
print(value.label);
},
),
),
);
}
```
A more detailed example is available in the [example](https://github.com/ecrax/category_picker/tree/master/example) folder
### CategoryPickerItem() parameters
| PropName | Description | Default value |
| ---------- | -------------------------------------------- | ------------------------------- |
| isSelected | Determines if the item is currently selected | false (not in constructor) |
| value | The value of the item | required |
| label | String to be displayed on the item itself | String value of `value` if null |
### CategoryPicker() parameters
| PropName | Description | Default value |
| --------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------- |
| items | List of children to be displayed | required |
| defaultSelected | Default selected item in range of `0` - `items.length` | 0 |
| onValueChanged | Callback with entire item when user switches selection. | `() => {}` |
| backgroundColor | Background color of entire category picker | Colors.transparent |
| selectedItemColor | Background color of selected item | Theme.of(context).accentColor |
| unselectedItemColor | Background color of all items that are not selected | Colors.transparent |
| selectedItemBorderColor | Border color of the selected item | Colors.transparent |
| unselectedItemBorderColor | Border color of all unselected items | Colors.grey[800] |
| selectedItemTextDarkThemeColor | Text color of the text for light theme inside an item while selected | Colors.white |
| selectedItemTextLightThemeColor | Text color of the text for light theme inside an item while not selected | Colors.black |
| unselectedItemTextDarkThemeColor | Text color of the text for dark theme inside an item while selected | Colors.white |
| unselectedItemTextLightThemeColor | Text color of the text for dark theme inside an item while not selected | Colors.white |
| itemBorderRadius | Border radius for all items | BorderRadius.circular(30) |
| itemHeight | Height of all items | 32.0 |
| itemLabelFontSize | Font size of the text inside of all items | 16.0 |
| categoryPickerMargin | Margin of the entire category picker | EdgeInsets.symmetric(vertical: 11) |
| categoryPickerPadding | Padding of the entire category picker | EdgeInsets.symmetric(horizontal: 16, vertical: 8) |
| itemMargin | Margin applied to each individual item | EdgeInsets.symmetric(horizontal: 4) |
| itemPadding | Padding applied to each individual item | EdgeInsets.symmetric(horizontal: 12) |