Search categories, packages and repositories

ducafecatFlutter ecosystem guide
Package detailsv0.0.3

phased

Simplified state management focused on animations

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
991
Likes
6
Pub points
150

Install package

flutter pub add phased

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

Phased is a Flutter package that simplifies state management with a focus on animations. It enables developers to manage state transitions in a declarative and intuitive way, particularly suited for UIs that rely heavily on animated changes. By organizing state updates into phases, it ensures smooth, coordinated animations across widgets. The package integrates seamlessly with Flutter's animation system and promotes clean, readable code for complex state-driven animations.

Use cases

  • Animating UI state transitions
  • Managing multi-step user flows
  • Creating interactive onboarding screens
  • Building responsive dashboards with dynamic updates
  • Synchronizing animations across multiple widgets

Key features

  • Phase-based state management
  • Built-in animation coordination
  • Declarative syntax for state changes
  • Lightweight and minimal boilerplate
  • Seamless integration with Flutter's animation framework

Suitable for

  • Developers prioritizing animation quality
  • Projects with complex state-driven animations
  • Teams seeking simple state management
  • UI-heavy applications like onboarding or dashboards
  • Flutter beginners learning animation patterns

Considerations

  • Best suited for animation-centric apps
  • May require learning a new paradigm for state handling
  • Not ideal for large-scale data-heavy applications
  • Limited documentation beyond basic examples
  • Requires understanding of Flutter's animation concepts

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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.

Categories

Animation & TransitionDependency Injection & State Management

Source repository

Projects using this package