Diagonal Wipe Icon for Flutter

📖 What Is This?

Apple's SF Symbols makes it easy to add wipe icon transitions to iOS apps. Flutter does not ship that interaction out of the box, making it tempting to skip the animation entirely.

Diagonal Wipe Icon bridges this gap. It provides a polished component that blends two icon states with a moving mask, supporting 8 different wipe directions. Perfect for:

🎛️ Toggle controls (mute, favorite, visible)
⚙️ Settings screens with stateful icons
✨ Anywhere you want polished micro-interactions

Accessible & lightweight. Zero dependencies.

🚀 Quick Start

Add the package via terminal:

flutter pub add diagonal_wipe_icon

Or add it manually to your pubspec.yaml:

dependencies:
  diagonal_wipe_icon: ^0.2.0

Then, use it anywhere you would typically place an Icon, such as inside an IconButton or a GestureDetector:

import 'package:diagonal_wipe_icon/diagonal_wipe_icon.dart';

IconButton(
  onPressed: () => setState(() => isFavorite = !isFavorite),
  icon: AnimatedDiagonalWipe.icon(
    isWiped: isFavorite,
    baseIcon: Icons.favorite_border,
    wipedIcon: Icons.favorite,
    semanticsLabel: 'Favorite Toggle',
  ),
);

🧰 Choose The Right API

If you have...	Use
Two `IconData` values	`AnimatedDiagonalWipe.icon(...)`
Two widgets	`AnimatedDiagonalWipe(...)`
An `Animation<double>` and two widgets	`DiagonalWipeTransition(...)`

Key Properties

Property	Description
`isWiped`	Which icon is fully visible (true/false state).
`baseIcon` / `wipedIcon`	The two icons to transition between.
`baseTint` / `wipedTint`	Optional colors. Inherits from `IconTheme` if null.
`size`	Optional size. Inherits from `IconTheme` if null.
`direction`	Forward wipe direction. Defaults to `topLeftToBottomRight`.
`reverseDirection`	Optional reverse wipe direction. Defaults to `direction.opposite`.
`animationStyle`	Timing constraints, curves, or disables animation entirely.

🎨 Customization

AnimatedDiagonalWipe animates automatically when isWiped changes. You can deeply customize the transition timing and ease using animationStyle or tweak the exact direction and colors:

AnimatedDiagonalWipe.icon(
  // State and Icons
  isWiped: isMuted,
  baseIcon: Icons.volume_up,
  wipedIcon: Icons.volume_off,
  
  // Customization
  baseTint: Colors.teal,
  direction: WipeDirection.bottomLeftToTopRight, // 8 directions supported
  reverseDirection: WipeDirection.topRightToBottomLeft,
  
  // Motion Presets
  animationStyle: const AnimationStyle(
    duration: Duration(milliseconds: 220),
    curve: Curves.fastOutSlowIn,
  ),
)

If you omit reverseDirection, the reverse pass uses direction.opposite. That gives a more natural loop for common toggle icons: the wipe-in and wipe-out can both begin from the same visual side.

AnimatedDiagonalWipe.icon(
  isWiped: isVisible,
  baseIcon: Icons.visibility,
  wipedIcon: Icons.visibility_off,
  direction: WipeDirection.topLeftToBottomRight,
  // Defaults to WipeDirection.bottomRightToTopLeft on the reverse pass.
)

⚡ Performance & Under The Hood

The effect works by revealing one layer while clipping the other across a shared square box.

Scenario	Performance
At Rest (`isWiped` settled)	Same as rendering a single static layer.
During Transition	Two clipped layers plus path updates.
Normal Usage	Flawless and smooth on modern devices.

✅ Settled states bypass clipping overhead
✅ Respects system reduce-motion preferences by jumping to final state

❓ FAQ

Why use this instead of AnimatedSwitcher?
Use it when you want an icon transition to feel like a state change. If a simple cross-fade is enough, AnimatedSwitcher is a great fit.
Can I use custom widgets?
Yes! Use AnimatedDiagonalWipe(...) for arbitrary widgets, like a CircularProgressIndicator.
Run the Demo Locally:
```
cd example
flutter run -d chrome
```

🌍 Also Available For Compose

A Compose Multiplatform version lives in the companion repository:

bernaferrari/diagonal-wipe-icon