smooth_transition 1.0.5

A simple and customizable Flutter package for smooth page transition animations, including fade, slide, and scale effects. Easy to use with Navigator.push().

smooth_transition

A simple and customizable Flutter package for smooth page transition animations.Supports fade, slide, and scale effects with minimal setup.

Features

• 🚀 Easy to use with Navigator.push()
• 🎬 Built-in animations: Fade, Slide, Scale
• ⚡ Lightweight & customizable
• 🔧 Adjustable animation duration & curve

Installation

Add dependency in your pubspec.yaml:

flutter:
    sdk: flutter
dependencies:
  smooth_transition: ^1.0.5

Then run:
flutter pub get

🚀 Usage

import 'package:smooth_transition/smooth_transition.dart';

Example

Navigator.push(
  context,
  EasyPageTransition(
    page: const SecondPage(),
    type: PageTransitionType.slide,
    duration: const Duration(milliseconds: 400),
  ),
);

Transition Types

A Flutter package for easy page transition animations.
Supports multiple transition types:

• fade – Fades the page in/out.
• scale – Scales the page in/out.
• rotate – Rotates the page during transition.
• slideLeft – Slides the page from right to left.
• slideRight – Slides the page from left to right.
• slideUp – Slides the page from bottom to top.
• slideDown – Slides the page from top to bottom.

New Transitions (v1.0.4)

• scaleFade – Combines scaling and fading for a pop-in effect.
• rotateScale – Rotates and scales the page simultaneously.
• slideLeftFade – Slides the page from right to left with fade.
• elasticScale – Bouncy scale animation with spring effect.
• flip – 3D card flip animation for page transitions.

🛠️ Example App

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

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("First Page")),
      body: Center(
        child: ElevatedButton(
          child: const Text("Go to Second Page"),
          onPressed: () {
            Navigator.push(
              context,
              EasyPageTransition(
                page: const SecondPage(),
                type: PageTransitionType.fade,
                duration: const Duration(milliseconds: 500),
              ),
            );
          },
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Second Page")),
      body: const Center(
        child: Text("Hello from the second page!"),
      ),
    );
  }
}

🤝 Contributing

Contributions are welcome! Please open an issue or submit a pull request.