Cloud Dissolve Animation #

A refined, cloud-like dissolve animation widget for Flutter applications. This package provides smooth blur, float, scale, and fade-out effects, designed specifically for elegant deletion animations in lists, complex UI components, or any standard widget.

Cloud Dissolve Animation Demo

Features #

Progressive Blur: Applies high-sigma Gaussian blur that smoothly spreads out.
Float and Scale: Gently lifts and expands the widget during dissolution.
Smooth Opacity Transition: Ensures a clean fade-out effect.
Auto-Collapse: Automatically closes the freed space, ideal for dynamic list structures.
Overlay Rendering: Renders at the top layer, allowing effects to safely exceed widget boundaries.
Highly Configurable: Control duration, animation curves, and spatial behaviors.
Ready-to-use Wrappers: Includes DeletableItemWrapper for boilerplate-free implementation in lists.

Installation #

Add the package to your pubspec.yaml:

dependencies:
  cloud_dissolve_animation: ^<latest_version>

Usage #

Basic Implementation #

Wrap any widget in a CloudDissolveAnimation to trigger the effect immediately upon rendering or as part of a state change.

import 'package:cloud_dissolve_animation/cloud_dissolve_animation.dart';

CloudDissolveAnimation(
  onComplete: () {
    // Handle the removal of the item from your data source
    setState(() => items.removeAt(index));
  },
  child: MyWidget(),
)

Implementing in Lists (Recommended) #

For ListView or similar dynamic sequences, use the provided DeletableItemWrapper to handle state and animation synchronization automatically.

import 'package:cloud_dissolve_animation/cloud_dissolve_animation.dart';

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    final item = items[index];

    return DeletableItemWrapper(
      key: ValueKey(item.id),
      isDeleting: item.isDeleting,
      onDeleteComplete: () {
        setState(() => items.removeWhere((i) => i.id == item.id));
      },
      child: ListTile(
        title: Text(item.title),
        trailing: IconButton(
          icon: const Icon(Icons.delete),
          onPressed: () {
            setState(() => item.isDeleting = true);
          },
        ),
      ),
    );
  },
)

Disabling Size Collapse #

If the animation occurs within a fixed-size container (not part of a dynamically sizing list), you can disable the shrink behavior to prevent the layout from shifting natively.

CloudDissolveAnimation(
  shrinkSize: false,
  duration: const Duration(milliseconds: 800),
  onComplete: () => debugPrint('Dissolved!'),
  child: MyFixedWidget(),
)

Configuration #