Animated Item Picker

Generic item picker that encapsulates single or multiple item selection logic.

Suitable for fixed size item lists, e.g level, week day or gender selector etc.

Supports tapUp/tapDown item opacity animation.



  Widget build(BuildContext context) {
    return AnimatedItemPicker(
          axis: Axis.horizontal,
          multipleSelection: false,
          itemCount: yourModelList.length,
          pressedOpacity: 0.85,
          programmaticSelection: {initialSelectedIndex},
          onItemPicked: (index, selected) {
          itemBuilder: (index, animValue, selected) => _YourItemWidget(
            name: yourModelList[index].name,
            borderColor: _colorTween1.transform(animValue),
            textColor: _colorTween2.transform(animValue),
            iconColor: _colorTween3.transform(animValue)


Often a user has to make a choice in an application, eg. gender, difficulty level, or switch a tab, etc. You can agree that well-designed animated item selection will make your UI look more intuitively with enhanced User Experience.

We at KiRN tech use this element so often that we decided to create a separate package for it.

Here we'll walk through the base stages of this package creation:

  • Define AnimatedItemPicker API.
  • Implement select/unSelect item animation
  • Animate item selection opacity