Flutter page route transition package, with 62 different transitions

Overview

Page Route Animator Package

Flutter page route transition package, with 62 different page transitions.

flutter platform pub package BSD-3-Clause effective dart

Examples

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  page_route_transition: ^1.0.3

Usage

To use this package you have to import it in your file by using below command:

import 'package:page_route_animator/page_route_animator.dart';

Code Example

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

void main(List<String> args) => runApp(const MyApp());

/// This widget is the root of your app.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Page Route Animator Code Example',
      theme: ThemeData(primarySwatch: Colors.purple),
      home: const HomeScreen(),

      /// using onGenerateRoute
      onGenerateRoute: (settings) {

        switch (settings.name) {
          case '/second-screen':
            return PageRouteAnimator(
              child: const SecondScreen(),
              routeAnimation: RouteAnimation.topToBottom,
              settings: settings,
              curve: Curves.linear,
              duration: const Duration(milliseconds: 500),
              reverseDuration: const Duration(milliseconds: 500),
            );
          default:
            return null;
        }
      },
    );
  }
}

/// HomeScreen
class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HomeScreen'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ListView(
          children: [
            /// Push using onGenerateRoute
            /// Navigator.pushNamed()
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(
                  context,
                  '/second-screen',
                  arguments: 'I am going',
                );
              },
              child: getText('Top To Bottom - onGenerateRoute'),
            ),

            /// Navigator.push()
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  PageRouteAnimator(
                    child: const SecondScreen(),
                    routeAnimation: RouteAnimation.bottomToTop,
                    settings: const RouteSettings(arguments: 'I am going'),
                    curve: Curves.slowMiddle,
                    duration: const Duration(milliseconds: 500),
                    reverseDuration: const Duration(milliseconds: 500),
                  ),
                );
              },
              child: getText('Bottom To Top'),
            ),

            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  PageRouteAnimator(
                    child: const SecondScreen(),
                    routeAnimation: RouteAnimation.leftToRight,
                    settings: const RouteSettings(arguments: 'I am going'),
                    curve: Curves.linear,
                  ),
                );
              },
              child: getText('Left To Right'),
            ),

            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  PageRouteAnimator(
                    child: const SecondScreen(),
                    routeAnimation: RouteAnimation.rightToLeft,
                    settings: const RouteSettings(arguments: 'I am going'),
                    curve: Curves.easeOut,
                  ),
                );
              },
              child: getText('Right To left'),
            ),

            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  PageRouteAnimator(
                    child: const SecondScreen(),
                    routeAnimation: RouteAnimation
                        .bottomRightToTopLeftWithFadeRotateAndScale,
                    settings: const RouteSettings(arguments: 'I am going'),
                    curve: Curves.easeOut,
                  ),
                );
              },
              child:
                  getText('BottomRight To TopLeft With Fade, Rotate And Scale'),
            ),
          ],
        ),
      ),
    );
  }
}

/// SecondScreen
class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    String? argument = ModalRoute.of(context)?.settings.arguments as String?;
    return Scaffold(
      backgroundColor: Colors.yellow,
      appBar: AppBar(
        title: const Text('SecondScreen'),
      ),
      body: Center(
        child: Text(
          argument ?? 'No Data',
          style: const TextStyle(
            fontSize: 48.0,
            fontWeight: FontWeight.bold,
            color: Colors.black,
          ),
        ),
      ),
    );
  }
}

// Helper Widget
Widget getText(String text) {
  return Align(
    alignment: Alignment.centerLeft,
    child: Text(text),
  );
}

Types Of Transitions

  • topToBottom,
  • bottomToTop,
  • leftToRight,
  • rightToLeft,
  • fade,
  • rotate,
  • scale,
  • size,
  • sizeFromTop,
  • sizeFromBottom,
  • fadeAndRotate,
  • fadeAndScale,
  • rotateAndScale,
  • fadeRotateAndScale,
  • topToBottomJoined,
  • bottomToTopJoined,
  • leftToRightJoined,
  • rightToLeftJoined,
  • topLeftToBottomRight,
  • topRightToBottomLeft,
  • bottomLeftToTopRight,
  • bottomRightToTopLeft,
  • topToBottomWithFade,
  • bottomToTopWithFade,
  • leftToRightWithFade,
  • rightToLeftWithFade,
  • topLeftToBottomRightWithFade,
  • bottomLeftToTopRightWithFade,
  • bottomRightToTopLeftWithFade,
  • topRightToBottomLeftWithFade,
  • topToBottomWithRotation,
  • bottomToTopWithRotation,
  • leftToRightWithRotation,
  • rightToLeftWithRotation,
  • topLeftToBottomRightWithRotation,
  • bottomLeftToTopRightWithRotation,
  • bottomRightToTopLeftWithRotation,
  • topRightToBottomLeftWithRotation,
  • topToBottomWithFadeAndRotate,
  • bottomToTopWithFadeAndRotate,
  • leftToRightWithFadeAndRotate,
  • rightToLeftWithFadeAndRotate,
  • topLeftToBottomRightWithFadeAndRotate,
  • topRightToBottomLeftWithFadeAndRotate,
  • bottomLeftToTopRightWithFadeAndRotate,
  • bottomRightToTopLeftWithFadeAndRotate,
  • topToBottomWithScale,
  • bottomToTopWithScale,
  • leftToRightWithScale,
  • rightToLeftWithScale,
  • topLeftToBottomRightWithScale,
  • topRightToBottomLeftWithScale,
  • bottomLeftToTopRightWithScale,
  • bottomRightToTopLeftWithScale,
  • topToBottomWithFadeRotateAndScale,
  • bottomToTopWithFadeRotateAndScale,
  • leftToRightWithFadeRotateAndScale,
  • rightToLeftWithFadeRotateAndScale,
  • topLeftToBottomRightWithFadeRotateAndScale,
  • topRightToBottomLeftWithFadeRotateAndScale,
  • bottomLeftToTopRightWithFadeRotateAndScale,
  • bottomRightToTopLeftWithFadeRotateAndScale,

Curves

Learn about Curves from official docs, curves.

License

BSD 3-Clause

You might also like...

Smooth-Page-Indicator-Example-Flutter - A simple example about smooth page indicator in Flutter

Smooth-Page-Indicator-Example-Flutter - A simple example about smooth page indicator in Flutter

Smooth Page Indicator Example - Flutter Screenshots ⚠️ Essential Packages smooth

Dec 7, 2022

OnBoarding Animation provides page like animation to the onBoarding screens with the page indicator

OnBoarding Animation OnBoarding Animation provides page like animation to the onBoarding screens with the page indicator. Screenshots and Screen recor

Oct 12, 2022

Login-page-ui - An animated login page, designed with dart

Login-page-ui - An animated login page, designed with dart

Beautiful Login Page UI Design and Animation ScreenShots This is one of my best

Nov 22, 2022

Login-with-Register-page - A Login with Register page combined with all movable images made with Dart

Login-with-Register-page - A Login with Register page combined with all movable images made with Dart

Flutter login page with register page A new dart project designed for login page

Aug 2, 2022

Flutter Transition UI - Create powerful UI design animations easily with Flutter

Flutter Transition UI - Create powerful UI design animations easily with Flutter

Transition Animation - Locations UI Design - Flutter Create powerful UI design a

Jun 30, 2022

Create account, animation transition and animation painter logo splash

Create account, animation transition and animation painter logo splash

flutter_text_form_field This project have a splash screen by using animation and creating profile. Login and Register. Page transition animation App S

May 2, 2021

Flutter The lightest, easiest and most convenient route management!

Flutter The lightest, easiest and most convenient route management!

Language: English | 中文简体 nav_router nav_router is the simplest / lightweight / convenient routing management solution for flutter. It supports various

Jan 3, 2023

Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions.

Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions.

English | Português The brightest, hippest, coolest router for Flutter. Features Simple route navigation Function handlers (map to a function instead

Jan 4, 2023

Flutter route generator

Flutter route generator

--- for more docs with examples https://autoroute.vercel.app Introduction Installation Setup and Usage Generated routes Navigation Navigating Between

Jan 7, 2023
Owner
Mateen Mehmood
A passionate, enthusiastic programmer. Skilled in Flutter, Android, NodeJS. Love to code <3
Mateen Mehmood
Auto route lib - Personal customized use to increase CupertinoRoute transition duration

Auto route lib - Personal customized use to increase CupertinoRoute transition duration , auto route 1.0.0-beta.10 base, so i have to reupload from .pub-cache instead fork it

Mochamad Nizwar Syafuan 0 Jan 4, 2022
Flutter modal bottom route - A flutter route animation

flutter_modal_bottom_route This is a flutter route animation demo. See Chinouo J

null 4 Aug 19, 2022
A rich, convenient, easy-to-use flutter page transition package

flutter_page_transition A rich, convenient, easy-to-use flutter page transition package. README in Chinese Some Demos Getting Started Add this to your

Double Han 56 Sep 27, 2022
Flutter Page Transition Package

Flutter Page Transition Package This package gives you beautiful page transitions. Demo Usage It is really easy to use! You should ensure that you add

Yasin ilhan 432 Dec 26, 2022
I created a welcome page, login page and signup page using Flutter

welcome_page UI design for welcome page, signUp page & Login page by Joy Obor Getting Started This project is a starting point for a Flutter applicati

spyder 0 Dec 29, 2021
A page transition which supports drag-down-to-pop gesture.

drag_down_to_pop A page transition which supports drag-down-to-pop gesture. The main source code is copied from the cupertino/route.dart in Flutter SD

nekocode 16 Aug 6, 2022
A simple, powerful widget to build cool transitions

motion_widget A simple, powerful widget to build cool transitions Features Fine-grained control with Interval Lightweight & fully customizable No boil

Sumeet Rukeja 33 Jul 29, 2021
A package that offers various page indicators inlcuding a Flutter implementation of the Ink Page Indicator

A package that offers various page indicators inlcuding a Flutter implementation of the Ink Page Indicator. See below for more examples.

null 50 Jan 6, 2022
A CustomPaint example where we can draw with different colors and different stroke sizes

CustomPaint A CustomPaint example where we can draw with different colors and different stroke sizes. A Flutter application which runs on iOS, Android

Behruz Hurramov 0 Dec 27, 2021
Hassan 1 Sep 27, 2022