套件詳情v1.0.2

animated_icon_button

用於建立自訂動畫 IconButton 的 Flutter 套件。包含所有可用圖示。基於原生 IconButton。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文件原始碼

近 30 天下載: 2萬
喜歡數: 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,
            ),
        ],
    ),