๐Ÿš€ zeba_academy_slide_transition

Advanced slide + scale transitions for Flutter with powerful chaining support โ€” lightweight, customizable, and dependency-free.


โœจ Features

  • ๐Ÿ”„ Chain multiple transitions effortlessly
  • ๐ŸŽฏ Smooth slide & scale animations
  • โšก Custom duration and easing curves
  • ๐Ÿ“ฆ Zero external dependencies
  • ๐ŸŽ“ Perfect for onboarding & learning flows

๐Ÿ“ฆ Installation

Add this to your pubspec.yaml:

dependencies:
  zeba_academy_slide_transition: ^0.0.1

Then run:

flutter pub get

๐Ÿš€ Usage

Basic Example

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

class DemoScreen extends StatefulWidget {
  const DemoScreen({super.key});

  @override
  State<DemoScreen> createState() => _DemoScreenState();
}

class _DemoScreenState extends State<DemoScreen>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;

  @override
  void initState() {
    controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 800),
    )..forward();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final animation = CurvedAnimation(
      parent: controller,
      curve: Curves.easeInOut,
    );

    return Scaffold(
      body: Center(
        child: ZebaChainedTransition(
          animation: animation,
          transitions: [
            (context, animation, child) {
              return ZebaSlideTransition(
                animation: animation,
                begin: const Offset(0, 1),
                child: child,
              );
            },
            (context, animation, child) {
              return ZebaScaleTransition(
                animation: animation,
                begin: 0.5,
                child: child,
              );
            },
          ],
          child: Container(
            width: 150,
            height: 150,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

โš™๏ธ Custom Configuration

ZebaSlideTransition(
  animation: animation,
  begin: Offset(-1, 0),
  config: ZebaTransitionConfig(
    duration: Duration(milliseconds: 600),
    curve: Curves.bounceOut,
  ),
  child: child,
)

๐Ÿงฉ Available Widgets

  • ZebaSlideTransition
  • ZebaScaleTransition
  • ZebaChainedTransition
  • ZebaTransitionConfig

๐Ÿงช Testing

Run tests using:

flutter test

๐Ÿค Contributing

Contributions, issues, and feature requests are welcome!


๐Ÿ“œ License

This project is licensed under the GNU General Public License v3.0.


๐Ÿ‘จโ€๐Ÿ’ป 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 https://sufyanism.com/ or connect with me on Linkedin https://www.linkedin.com/in/sufyanism


๐ŸŒ Your all-in-one no-bloat hub!

๐Ÿš€ Explore cutting-edge resources in coding, tech, and development at zeba.academy and code.zeba.academy. Empower yourself with practical skills through curated directives, 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: https://zeba.academy โžก Explore hands-on courses and resources at: https://code.zeba.academy โžก Check out our YouTube for more tutorials: https://www.youtube.com/@zeba.academy โžก Follow us on Instagram: https://www.instagram.com/zeba.academy/


โญ Support

If you like this package, consider giving it a star โญ on GitHub!