animated_item_picker

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

Animated Item Picker 是一个 Flutter 包，提供可自定义的动画界面，用于从列表中选择单个或多个项目。它封装了选择逻辑，具有平滑的过渡效果和视觉反馈，非常适合表单、筛选或偏好设置。该包支持所有主要平台，包括 Android、iOS、Web、macOS、Windows 和 Linux，确保在各种设备上行为一致。通过直观的 API 和内置动画，它简化了交互式项目选择的实现，无需自定义状态管理。

适合场景

具有可选选项的表单输入
过滤接口
用户偏好选择器
多选下拉菜单
交互式列表导航

主要特点

流畅的动画过渡
支持单选和多选
跨平台兼容性
可自定义外观
内置的选择状态管理
轻量且易于集成

适合对象

开发交互式表单的开发者
需要精美选择界面的设计人员
需要多选功能的应用程序
面向多个平台的项目
希望拥有可复用选择组件的团队

使用建议

可能需要额外的样式才能适应复杂主题
仅限基本选择模式
未针对非常大的数据集进行优化
动画性能取决于设备功能
需要理解 Flutter 的状态管理

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

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.

Preview

Usage

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

Article

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

More: https://kirn.tech/article-flutteranimation-animated-item-picker

搜索插件、代码仓与 APP 分类

安装插件