FLUTTER ECOSYSTEM

erickzanardo/phased

アニメーションに焦点を当てた簡素な状態管理

フェーズ制 のプロジェクト画像
Stars
32
Forks
1
最終プッシュ(UTC)
2024/02/18
プロジェクト状態
公開中
Erick GitHub avatar
GITHUB User

Erick ↗

@vgventuresBrazil公式サイト ↗
言語Dart

このリポジトリが公開するパッケージ

使用している依存関係

依存関係一覧 4 件

元の README

以下は英語原文のスナップショットです。最新版は GitHub をご覧ください。

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.