zeba_academy_page_transitions 0.0.1

Beautiful and customizable page transitions for Flutter apps with fade, slide, scale, shared element animations, and gesture navigation.

zeba_academy_page_transitions

A powerful and customizable Flutter package for creating beautiful page transitions with minimal code.

zeba_academy_page_transitions provides smooth animations including fade, slide, scale, rotation, platform-aware transitions, shared element animations, gesture navigation, and custom route builders.

---

✨ Features

✅ Fade transitions ✅ Slide transitions (left, right, up, down) ✅ Scale animations ✅ Rotation animations ✅ Shared element animations using Hero ✅ Gesture navigation support ✅ Platform-aware transitions ✅ Customizable duration and curves ✅ Lightweight and easy to use ✅ Null-safe Flutter package ✅ Production-ready architecture

---

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  zeba_academy_page_transitions: ^0.0.1

Then run:

flutter pub get

---

🚀 Import

import 'package:zeba_academy_page_transitions/zeba_academy_page_transitions.dart';

---

🎬 Available Transition Types

Transition	Description
fade	Smooth fade animation
slideLeft	Slide from right to left
slideRight	Slide from left to right
slideUp	Slide from bottom
slideDown	Slide from top
scale	Zoom animation
rotation	Rotation animation
platform	Platform-based transition

---

🛠 Basic Usage

Navigator.push(
  context,
  ZebaPageRoute(
    transitionType: ZebaTransitionType.fade,
    child: const DetailsPage(),
  ),
);

---

🎨 Fade Transition

Navigator.push(
  context,
  ZebaPageRoute(
    transitionType: ZebaTransitionType.fade,
    child: const DetailsPage(),
  ),
);

---

↔️ Slide Transition

Slide Left

Navigator.push(
  context,
  ZebaPageRoute(
    transitionType: ZebaTransitionType.slideLeft,
    child: const DetailsPage(),
  ),
);

Slide Right

Navigator.push(
  context,
  ZebaPageRoute(
    transitionType: ZebaTransitionType.slideRight,
    child: const DetailsPage(),
  ),
);

Slide Up

Navigator.push(
  context,
  ZebaPageRoute(
    transitionType: ZebaTransitionType.slideUp,
    child: const DetailsPage(),
  ),
);

Slide Down

Navigator.push(
  context,
  ZebaPageRoute(
    transitionType: ZebaTransitionType.slideDown,
    child: const DetailsPage(),
  ),
);

---

🔍 Scale Transition

Navigator.push(
  context,
  ZebaPageRoute(
    transitionType: ZebaTransitionType.scale,
    child: const DetailsPage(),
  ),
);

---

🔄 Rotation Transition

Navigator.push(
  context,
  ZebaPageRoute(
    transitionType: ZebaTransitionType.rotation,
    child: const DetailsPage(),
  ),
);

---

📱 Platform Transition

Automatically adapts transition style based on platform.

Navigator.push(
  context,
  ZebaPageRoute(
    transitionType: ZebaTransitionType.platform,
    child: const DetailsPage(),
  ),
);

---

⚡ Custom Duration

Navigator.push(
  context,
  ZebaPageRoute(
    duration: const Duration(milliseconds: 800),
    transitionType: ZebaTransitionType.fade,
    child: const DetailsPage(),
  ),
);

---

🎯 Custom Animation Curve

Navigator.push(
  context,
  ZebaPageRoute(
    curve: Curves.bounceOut,
    transitionType: ZebaTransitionType.scale,
    child: const DetailsPage(),
  ),
);

---

👆 Gesture Navigation

Enable swipe-back gesture navigation.

Navigator.push(
  context,
  ZebaPageRoute(
    enableGestureNavigation: true,
    transitionType: ZebaTransitionType.slideRight,
    child: const DetailsPage(),
  ),
);

---

🦸 Shared Element Animations

Flutter Hero animations work perfectly with this package.

First Page

Hero(
  tag: 'profile-image',
  child: Image.asset(
    'assets/profile.png',
    width: 100,
  ),
)

Second Page

Hero(
  tag: 'profile-image',
  child: Image.asset(
    'assets/profile.png',
    width: 250,
  ),
)

---

📂 Complete Example

import 'package:flutter/material.dart';
import 'package:zeba_academy_page_transitions/zeba_academy_page_transitions.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Zeba Transitions'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              ZebaPageRoute(
                transitionType:
                    ZebaTransitionType.slideLeft,
                duration: const Duration(
                  milliseconds: 500,
                ),
                child: const DetailsPage(),
              ),
            );
          },
          child: const Text('Open Page'),
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  const DetailsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Details Page'),
      ),
      body: const Center(
        child: Text(
          'Beautiful Transition!',
          style: TextStyle(
            fontSize: 24,
          ),
        ),
      ),
    );
  }
}

---

📁 Package Structure

lib/
│
├── zeba_academy_page_transitions.dart
│
├── src/
│   ├── enums/
│   ├── routes/
│   ├── transitions/
│   └── utils/

---

🧪 Testing

Run tests using:

flutter test

---

📊 Flutter Compatibility

Flutter Version	Supported
3.x	✅
Material 3	✅
Null Safety	✅

---

🤝 Contributing

Contributions are welcome!

Feel free to:

• Open issues
• Suggest features
• Submit pull requests

---

📜 License

This project is licensed under the GPL License.

---

👨‍💻 About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects. You can learn more about me and my work at sufyanism.com or connect with me on Linkedin

---

🚀 Your all-in-one learning hub!

🚀 Explore courses and resources in coding, tech, and development at zeba.academy and code.zeba.academy. Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience. Level up your tech game today! 💻✨

Zeba Academy is a learning platform dedicated to coding, technology, and development.

➡ Visit our main site: zeba.academy ➡ Explore hands-on courses and resources at: code.zeba.academy ➡ Check out our YouTube for more tutorials: zeba.academy ➡ Follow us on Instagram: zeba.academy

---

⭐ Support

If you like this package, please give it a ⭐ on GitHub and share it with the Flutter community!

---

Thank you for visiting!