---

✨ Preview

---

📦 Installation

Add to your pubspec.yaml:

dependencies:
  circle_blast_transition: ^0.1.0

Then run:

flutter pub get

---

🚀 Quick Start

import 'package:circle_blast_transition/circle_blast_transition.dart';

Navigator.push(
  context,
  CircleBlastRoute(
    page: const MyNextScreen(),
  ),
);

---

🎨 Blast Styles

Style	Preview	Description
BlastStyle.radialCenter	🔵	Circles expand outward from the screen centre
BlastStyle.random	🎲	Circles appear in a stable random order
BlastStyle.topToBottom	⬇️	Sweeps row by row from top to bottom
BlastStyle.diagonal	↘️	Diagonal wave from top-left to bottom-right

Navigator.push(
  context,
  CircleBlastRoute(
    page: const MyNextScreen(),
    style: BlastStyle.diagonal,       // pick your style
    cols: 9,                          // grid columns
    rows: 16,                         // grid rows
    duration: const Duration(milliseconds: 750),
  ),
);

---

🛠️ API Reference

CircleBlastRoute

Parameter	Type	Default	Description
page	Widget	required	Destination screen
style	BlastStyle	radialCenter	Circle reveal order
cols	int	9	Grid columns
rows	int	16	Grid rows
duration	Duration	750ms	Forward transition duration
reverseDuration	Duration?	same as duration	Reverse (pop) transition duration
settings	RouteSettings?	null	Passed to PageRouteBuilder

CircleBlastTransition (standalone widget)

Use this if you manage your own AnimationController:

CircleBlastTransition(
  animation: myController,   // Animation<double> 0 → 1
  style: BlastStyle.random,
  cols: 8,
  rows: 14,
  child: MyPage(),
)

---

⚡ Low-Spec Device Tips

This transition uses a ClipPath mask — the incoming page is rendered once and only the clip shape changes per frame. No snapshots, no extra layers.

Setting	Recommendation
cols / rows	Use 6 × 10 on weak devices
duration	500ms reduces total frames rendered
Style	All 4 styles have identical GPU cost

---

📁 Example App

A full interactive demo is included in the example/ folder.
It lets you switch between all 4 styles and adjust the grid density live.

cd example
flutter run

---

🤝 Contributing

Contributions are welcome!

1. Fork the repo
2. Create your branch: git checkout -b feature/my-feature
3. Commit your changes: git commit -m 'Add my feature'
4. Push to the branch: git push origin feature/my-feature
5. Open a Pull Request

Please open an issue first for major changes.

---

📄 License

MIT © 2026 Sivakarthikayan

See the LICENSE file for details.

---