插件详情v1.0.2

animated_icon_button

用于创建自定义动画 IconButton 的 Flutter 包。包含所有可用图标。基于原生 IconButton。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 1.7万
喜欢数: 295
Pub 分数: 160

安装插件

flutter pub add animated_icon_button

插件介绍

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

一个增强原生 IconButton 的 Flutter 包，提供流畅且可自定义的动画效果。支持所有可用图标，开发者可以使用极少代码创建视觉吸引力强的按钮交互。基于 Flutter 原生 IconButton 构建，保持兼容性的同时增加了缩放、旋转和颜色过渡等动态效果。适用于注重用户反馈和视觉美感的现代 UI。

适合场景

创建交互式应用按钮
增强表单中的用户反馈
在仪表板中添加微交互
设计动画导航元素
通过视觉提示改善可访问性
构建引人入胜的引导屏幕

主要特点

预构建的动画预设
支持所有 Flutter 图标
可自定义的动画持续时间和曲线
与现有代码的轻松集成
轻量且高效
跨平台兼容性

适合对象

寻求动态组件的UI/UX设计师
开发交互式应用的开发者
需要微妙但有效的动画的项目
专注于用户参与的应用
使用 Flutter 进行多平台部署的团队

使用建议

可能会略微增加包大小
动画应谨慎使用以保证性能
不适合高频按钮点击
需要了解 Flutter 的动画系统
最佳搭配语义化按钮标签以提升可访问性

原始 README

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

animated_icon_button

😊 Flutter package to create custom animated IconButton.

😵 Includes all available icons. Based on native IconButton.

Breaking Change

After 1.0.2 version you can use multiple icons.

Getting Started

Follow these steps to use this library

Add dependency

dependencies:
  animated_icon_button: ^1.0.2 #latest version

Add import package

import 'package:animated_icon_button/animated_icon_button.dart';

Easy to use

Simple example of use AnimatedIconButton
Put this code in your project at an screen and wait for magic 😊

    AnimatedIconButton(
        onPressed: () => print('all icons pressed'),
        icons: [
            AnimatedIconButtonEntry(
                icon: Icon(Icons.add),
                onPressed: () => print('add pressed'),
            ),
            AnimatedIconButtonEntry(
                icon: Icon(Icons.close),
            ),
        ],
    ),

More icons

Now you can use more than 2 icons Add new icons to your list and they will change one by one

    AnimatedIconButton(
        size: 35,
        onPressed: () {
            print('all icons pressed');
        },
        duration: const Duration(milliseconds: 200),
        icons: <AnimatedIconButtonEntry>[
            AnimatedIconButtonEntry(
                icon: Icon(
                    Icons.mic,
                    color: Colors.purple,
                ),
                onPressed: () => print('mic pressed'),
                backgroundColor: Colors.white,
            ),
            AnimatedIconButtonEntry(
                icon: Icon(
                    Icons.g_translate,
                    color: Colors.purple,
                ),
                backgroundColor: Colors.white,
            ),
            AnimatedIconButtonEntry(
                icon: Icon(
                    Icons.collections_sharp,
                    color: Colors.purple,
                ),
                backgroundColor: Colors.white,
            ),
        ],
    ),

Custom animation controller

In order to animate your icons in a custom way, like on text changed or when pressing a button, just use the animationController property as follows.

    var animationController = AnimationController(
        vsync: this,
        duration: Duration(milliseconds: 200),
        reverseDuration: Duration(milliseconds: 200),
    );

    AnimatedIconButton(
        animationController: animationController,
        size: 35,
        onPressed: () {
            print('all icons pressed');
        },
        duration: const Duration(milliseconds: 200),
        icons: <AnimatedIconButtonEntry>[
            AnimatedIconButtonEntry(
                icon: Icon(
                    Icons.mic,
                    color: Colors.purple,
                ),
                onPressed: () => print('mic pressed'),
                backgroundColor: Colors.white,
            ),
            AnimatedIconButtonEntry(
                icon: Icon(
                    Icons.g_translate,
                    color: Colors.purple,
                ),
                backgroundColor: Colors.white,
            ),
            AnimatedIconButtonEntry(
                icon: Icon(
                    Icons.collections_sharp,
                    color: Colors.purple,
                ),
                backgroundColor: Colors.white,
            ),
        ],
    ),