{"id":50100189,"url":"https://github.com/bernaferrari/diagonal-wipe-icon-flutter","last_synced_at":"2026-05-23T07:08:25.529Z","repository":{"id":343549581,"uuid":"1178150606","full_name":"bernaferrari/diagonal-wipe-icon-flutter","owner":"bernaferrari","description":"Polished wipe-style icon transitions for Flutter","archived":false,"fork":false,"pushed_at":"2026-03-10T22:21:30.000Z","size":2979,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-11T01:10:25.690Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://bernaferrari.github.io/diagonal-wipe-icon-flutter/","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bernaferrari.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-10T18:32:41.000Z","updated_at":"2026-03-10T22:21:33.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/bernaferrari/diagonal-wipe-icon-flutter","commit_stats":null,"previous_names":["bernaferrari/diagonal-wipe-icon-flutter"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/bernaferrari/diagonal-wipe-icon-flutter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernaferrari%2Fdiagonal-wipe-icon-flutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernaferrari%2Fdiagonal-wipe-icon-flutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernaferrari%2Fdiagonal-wipe-icon-flutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernaferrari%2Fdiagonal-wipe-icon-flutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bernaferrari","download_url":"https://codeload.github.com/bernaferrari/diagonal-wipe-icon-flutter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bernaferrari%2Fdiagonal-wipe-icon-flutter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33386098,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-23T04:15:53.637Z","status":"ssl_error","status_checked_at":"2026-05-23T04:15:53.242Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-05-23T07:08:24.860Z","updated_at":"2026-05-23T07:08:25.521Z","avatar_url":"https://github.com/bernaferrari.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# Diagonal Wipe Icon for Flutter\n\n\u003ca href=\"https://bernaferrari.github.io/diagonal-wipe-icon-flutter/\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/bernaferrari/diagonal-wipe-icon-flutter/main/assets/animated-icons.webp\" width=\"680\" alt=\"Diagonal wipe icon animation in action\"\u003e\n\u003c/a\u003e\n\n\n\u003ca href=\"https://bernaferrari.github.io/diagonal-wipe-icon-flutter/\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/bernaferrari/diagonal-wipe-icon-flutter/main/assets/preview.png\" width=\"680\" alt=\"Diagonal wipe icon static preview\"\u003e\n\u003c/a\u003e\n\n**[🚀 Live Demo](https://bernaferrari.github.io/diagonal-wipe-icon-flutter/)**\n\n\n\u003c/div\u003e\n\n## 📖 What Is This?\n\nApple'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.\n\n**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:\n- 🎛️ **Toggle controls** (`mute`, `favorite`, `visible`)\n- ⚙️ **Settings screens** with stateful icons\n- ✨ **Anywhere** you want polished micro-interactions\n\n**Accessible \u0026 lightweight. Zero dependencies.**\n\n## 🚀 Quick Start\n\n[![pub package](https://img.shields.io/pub/v/diagonal_wipe_icon.svg)](https://pub.dev/packages/diagonal_wipe_icon)\n\nAdd the package via terminal:\n```bash\nflutter pub add diagonal_wipe_icon\n```\n\nOr add it manually to your `pubspec.yaml`:\n```yaml\ndependencies:\n  diagonal_wipe_icon: ^0.2.1\n```\n\nThen, use it anywhere you would typically place an `Icon`, such as inside an `IconButton` or a `GestureDetector`:\n\n```dart\nimport 'package:diagonal_wipe_icon/diagonal_wipe_icon.dart';\n\nIconButton(\n  onPressed: () =\u003e setState(() =\u003e isFavorite = !isFavorite),\n  icon: AnimatedDiagonalWipe.icon(\n    isWiped: isFavorite,\n    baseIcon: Icons.favorite_border,\n    wipedIcon: Icons.favorite,\n    semanticsLabel: 'Favorite Toggle',\n  ),\n);\n```\n\n## 🧰 Choose The Right API\n\n| If you have... | Use |\n| --- | --- |\n| Two `IconData` values | `AnimatedDiagonalWipe.icon(...)` |\n| Two widgets | `AnimatedDiagonalWipe(...)` |\n| An `Animation\u003cdouble\u003e` and two widgets | `DiagonalWipeTransition(...)` |\n\n### Key Properties\n\n| Property | Description |\n| --- | --- |\n| `isWiped` | Which icon is fully visible (true/false state). |\n| `baseIcon` / `wipedIcon` | The two icons to transition between. |\n| `baseTint` / `wipedTint` | Optional colors. Inherits from `IconTheme` if null. |\n| `size` | Optional size. Inherits from `IconTheme` if null. |\n| `direction` | Forward wipe direction. Defaults to `topLeftToBottomRight`. |\n| `reverseDirection` | Optional visual reverse wipe direction. Defaults to `direction.opposite`. |\n| `animationStyle` | Timing constraints, curves, or disables animation entirely. |\n\n## 🎨 Customization\n\n`AnimatedDiagonalWipe` animates automatically when `isWiped` changes. You can deeply customize the transition timing and ease using `animationStyle` or tweak the exact direction and colors:\n\n```dart\nAnimatedDiagonalWipe.icon(\n  // State and Icons\n  isWiped: isMuted,\n  baseIcon: Icons.volume_up,\n  wipedIcon: Icons.volume_off,\n  \n  // Customization\n  baseTint: Colors.teal,\n  direction: WipeDirection.bottomLeftToTopRight, // 8 directions supported\n  reverseDirection: WipeDirection.topRightToBottomLeft,\n  \n  // Motion Presets\n  animationStyle: const AnimationStyle(\n    duration: Duration(milliseconds: 220),\n    curve: Curves.fastOutSlowIn,\n  ),\n)\n```\n\nIf you omit `reverseDirection`, the reverse pass uses `direction.opposite`. Internally the clip path mirrors reverse progress (`1.0` to `0.0`) so explicit reverse values still match the visual direction you choose.\n\n```dart\nAnimatedDiagonalWipe.icon(\n  isWiped: isVisible,\n  baseIcon: Icons.visibility,\n  wipedIcon: Icons.visibility_off,\n  direction: WipeDirection.topLeftToBottomRight,\n  // Defaults to WipeDirection.bottomRightToTopLeft on the reverse pass.\n)\n```\n\n\u003cdiv align=\"center\"\u003e\n\n\u003ca href=\"https://bernaferrari.github.io/diagonal-wipe-icon-flutter/\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/bernaferrari/diagonal-wipe-icon-flutter/main/assets/how-it-works-mini.webp\" width=\"680\" alt=\"Diagonal wipe mask animation in action\"\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://bernaferrari.github.io/diagonal-wipe-icon-flutter/\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/bernaferrari/diagonal-wipe-icon-flutter/main/assets/how-it-works.png\" width=\"680\" alt=\"Diagram showing the wipe mask clipping one layer over another\"\u003e\n\u003c/a\u003e\n\n\u003c/div\u003e\n\n## ⚡ Performance \u0026 Under The Hood\n\nThe effect works by revealing one layer while clipping the other across a shared square box.\n\n| Scenario | Performance |\n|----------|-------------|\n| **At Rest** (`isWiped` settled) | Same as rendering a single static layer. |\n| **During Transition** | Two clipped layers plus path updates. |\n| **Normal Usage** | Flawless and smooth on modern devices. |\n\n- ✅ Settled states bypass clipping overhead\n- ✅ Respects system reduce-motion preferences by jumping to final state\n\n## ❓ FAQ\n\n- **Why use this instead of `AnimatedSwitcher`?**  \n  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.\n- **Can I use custom widgets?**  \n  Yes! Use `AnimatedDiagonalWipe(...)` for arbitrary widgets, like a `CircularProgressIndicator`.\n- **Run the Demo Locally:**\n  ```bash\n  cd example\n  flutter run -d chrome\n  ```\n\n## 🌍 Also Available For Compose\n\nA Compose Multiplatform version lives in the companion repository:\n\n- [bernaferrari/diagonal-wipe-icon](https://github.com/bernaferrari/diagonal-wipe-icon)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbernaferrari%2Fdiagonal-wipe-icon-flutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbernaferrari%2Fdiagonal-wipe-icon-flutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbernaferrari%2Fdiagonal-wipe-icon-flutter/lists"}