Flutter Animation.
Animated Item Picker.

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.

Animated Item Pickers with single and multiple selection

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

Define AnimatedItemPicker API— configuration params and a set of functions that could make this class convenient to use and generic as much as possible.

itemBuilder(index, animValue) — here clients apply changes to their items according to running animation triggered by item selection. It looks pretty generic, as AnimatedItemPicker knows nothing about a client's item's implementation and provided animValue associated with an item's index allows to smoothly change item properties according to a new selection state.

onItemPicked(index, selected) — is called after selection animation is completed. To avoid redundant invocation, in case when a user has selected another item before previous selection animation was completed, AnimatedItemPicker animates back from current animation value.
axis — AnimatedItemPicker supports vertical or horizontal items positioning.
expandedItems — set true to give items equal size by wrapping in Expanded.
itemCount
initialSelection
multipleSelection — allows to select multiple items
maxItemSelectionCount — if multipleSelection is allowed, sets max number of item that's possible to select
duration and curve — animation params
pressedOpacity — applied to tapped item

2. Implement select/unSelect item animation.
To define which item animate up and which animate down, we need to keep track of previous item state, so we _AnimatedItemValue for this:

Order of operations is the following:

once user picks an item, _resolveSelection(int selectedIndex) is called, where Set<int> _selectedPositions is updated before an animation is started, so that each _AnimatedItemValue with it's current selection state could be check against and an animValue could be applied changing _AnimatedItemValue._value in the correct direction — animUp or animDown.

then inside animationControllerListener selectable items are rebuild according to already updated _selectedItems and a new _animation.value

next calculate animValue for each of selectable items and manage _selected state. All this action takes place in:

new animationValue's are apply'ed in _animationController callback:

call setState () inside the callback — triggers a build method of a widget with already updated _animatedItemValues according to the running animation:

invoke onItemPicked callback. To avoid UI glitches this callback is called right after when selection animation completes, to be more precise — when the last frame triggered by animation was rendered. Here how it's done:

3. Animate item selection opacity.
Animates opacity in onTapDown, and animates it out onTapUp. All opacity animation logic is encapsulated in AnimatedItem. Also, it intercepts item tap events.

Thanks for reading! Source code and full example code on dart pub: animated_item_picker.

Don't miss the latest news. Subscribe to our newsletter!

Quick and Smooth Mobile App Launch
For Your Startup.

Peremohy Ave 24, Kyiv, Ukraine, 04116

Socials

Flutter Animation. Animated Item Picker.

Flutter Animation.
Animated Item Picker.