搜尋套件、儲存庫與 APP 分類

套件詳情v1.0.2+1

animated_progress_button

您在尋找讓您的按鈕變得專業的解決方案嗎?這個套件可以為您提供來自Pinterest的所有動畫靈感。

近 30 天下載
9
喜歡數
26
Pub 分數
30

安裝套件

flutter pub add animated_progress_button

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

animated_progress_button 套件透過流暢且視覺上吸引人的動畫增強了標準按鈕,靈感來自 Pinterest。它允許開發者建立可在狀態之間轉換的互動式進度按鈕,例如閒置、載入和成功狀態,並支援自訂視覺效果與行為。非常適合現代 UI,可為表單提交或資料處理等操作提供動態回饋。此套件輕量且易於整合,無需複雜程式碼即可為使用者介面增添精緻觸感。其動畫風格設計旨在透過即時反饋提升使用者參與度。

適用情境

  • 帶有視覺反饋的表單提交
  • 移動應用中的加載狀態
  • 互動式操作按鈕
  • 提升電子商務應用的使用者體驗
  • 建立吸引人的入門流程

主要特色

  • Pinterest 風格的動畫設計
  • 可自訂的按鈕狀態
  • 在閒置/載入/成功狀態之間的平滑過渡
  • 與 Flutter 小部件的輕鬆整合
  • 支援自訂顏色與圖示

適合對象

  • 尋求精緻使用者介面元件的開發人員
  • 需要直覺式使用者回饋的應用程式
  • 注重設計的 Flutter 項目
  • 具備互動式表單的行動應用程式
  • 致力於打造現代、引人入勝的介面的團隊

使用建議

  • 有限的平台特定自訂
  • 無內建的可存取性功能支援
  • 動畫可能會影響低階裝置的效能
  • 需要手動處理狀態管理
  • 不適合高度複雜的互動式工作流程

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

Animated Progress Button

Animated loading button to make you app button looks smoother. Take inspritation from Pinterest https://www.pinterest.com/pin/671177150707141229/

alt text

Usages

Create animatedButtonController for controlling the button.

import 'package:animated_progress_button/animated_progress_button.dart';

final AnimatedButtonController animatedButtonController = AnimatedButtonController();

Then customize the button like your own way Noted that you must call animatedButtonController.completed() after getting response from server in order to complete the button animation

AnimatedButton(
   controller: animatedButtonController,
   color: Colors.greenAccent,
   text: 'Log in',
   loadingText: 'Loading',
   loadedIcon: Icon(Icons.check, color: Colors.white),
   onPressed: () async {
       /// calling your API here and wait for the response.
       await Future.delayed(Duration(seconds: 5)); // simulated your API requesting time.
       animatedButtonController.completed(); // call when you get the response
       await Future.delayed(Duration(seconds: 2));
       animatedButtonController.reset(); // call to reset button animation
   },
),

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。