category_picker 1.0.1
category_picker: ^1.0.1 copied to clipboard

An input widget to handle selection of category like choices. Inspired by the YouTube recommendations bar on the home page.

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)

import 'package:category_picker/category_picker.dart';
import 'package:category_picker/category_picker_item.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 folder

CategoryPickerItem() parameters #

PropNameDescriptionDefault value
isSelectedDetermines if the item is currently selectedfalse (not in constructor)
valueThe value of the itemrequired
labelString to be displayed on the item itselfString value of value if null

CategoryPicker() parameters #

PropNameDescriptionDefault value
itemsList of children to be displayedrequired
defaultSelectedDefault selected item in range of 0 - items.length0
onValueChangedCallback with entire item when user switches selection.() => {}
backgroundColorBackground color of entire category pickerColors.transparent
selectedItemColorBackground color of selected itemTheme.of(context).accentColor
unselectedItemColorBackground color of all items that are not selectedColors.transparent
selectedItemBorderColorBorder color of the selected itemColors.transparent
unselectedItemBorderColorBorder color of all unselected itemsColors.grey[800]
selectedItemTextDarkThemeColorText color of the text for light theme inside an item while selectedColors.white
selectedItemTextLightThemeColorText color of the text for light theme inside an item while not selectedColors.black
unselectedItemTextDarkThemeColorText color of the text for dark theme inside an item while selectedColors.white
unselectedItemTextLightThemeColorText color of the text for dark theme inside an item while not selectedColors.white
itemBorderRadiusBorder radius for all itemsBorderRadius.circular(30)
itemHeightHeight of all items32.0
itemLabelFontSizeFont size of the text inside of all items16.0
categoryPickerMarginMargin of the entire category pickerEdgeInsets.symmetric(vertical: 11)
categoryPickerPaddingPadding of the entire category pickerEdgeInsets.symmetric(horizontal: 16, vertical: 8)
itemMarginMargin applied to each individual itemEdgeInsets.symmetric(horizontal: 4)
itemPaddingPadding applied to each individual itemEdgeInsets.symmetric(horizontal: 12)
9
likes
110
pub points
67%
popularity

An input widget to handle selection of category like choices. Inspired by the YouTube recommendations bar on the home page.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

zugecraftet@gmail.com

License

GPL 3.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on category_picker