搜尋分類、套件與程式碼儲存庫

套件詳情v0.0.3

phased

專注於動畫的簡化狀態管理

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
991
喜歡數
6
Pub 分數
150

安裝套件

flutter pub add phased

套件介紹

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

Phased 是一個 Flutter 套件,透過專注於動畫來簡化狀態管理。它讓開發者能以宣告式且直覺的方式管理狀態轉換,特別適合依賴大量動畫變化的介面。透過將狀態更新組織成階段,確保跨元件的順暢、協調動畫。此套件與 Flutter 的動畫系統無縫整合,並促進複雜狀態驅動動畫的乾淨、可讀程式碼。

適用情境

  • 動畫化UI狀態轉換
  • 管理多步驟用戶流程
  • 建立互動式入門畫面
  • 使用動態更新構建響應式儀表板
  • 在多個小部件之間同步動畫

主要特色

  • 基於階段的狀態管理
  • 內建動畫協調
  • 宣告式語法用於狀態變更
  • 輕量且最小化樣板
  • 與 Flutter 動畫框架的無縫整合

適合對象

  • 開發者優先考慮動畫品質
  • 具有複雜狀態驅動動畫的項目
  • 尋求簡單狀態管理的團隊
  • UI密集型應用,如引導流程或儀表板
  • Flutter 初學者學習動畫模式

使用建議

  • 最適合以動畫為中心的應用程式
  • 可能需要學習一種新的狀態處理範式
  • 不適合大規模資料密集型應用
  • 除了基本範例之外,文件內容有限
  • 需要了解 Flutter 的動畫概念

原始 README

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

Phased

style: very good analysis License: MIT

Simplified state management focused on animations

Installation 💻

❗ In order to start using Phased you must have the Flutter SDK installed on your machine.

Add phased to your pubspec.yaml:

dependencies:
  phased:

Install it:

flutter packages get

Description

Phased is a simple state management meant to be used to build animations, its objective is to provide an easy, boilerplateless way to create and manage the state of an animation, so developers can focus on building the animations themselves.

The package consists of two classes: PhasedState, which describes the state and offers control methods for an animation, and Phased, an abstract Widget that will build the animation itself.

Example

To build a simple animation that blinks a child using opacity, the following code can be used:

class BlinkState extends PhasedState<bool> {
  BlinkState() : super(values: [true, false]);
}

class Blink extends Phased<bool> {
  const Blink({
    super.key,
    required super.state,
    required this.child,
  });

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return AnimatedOpacity(
      opacity: state.phaseValue(
        values: const {true: 1},
        defaultValue: 0,
      ),
      onEnd: state.next,
      duration: const Duration(milliseconds: 250),
      child: child,
    );
  }
}

Then to use it:

Blink(
  state: BlinkState(),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
);

For more complex examples, check the example folder.


所屬分類

原始碼儲存庫

使用此套件的專案