A rich, convenient, easy-to-use flutter page transition package

Overview

flutter_page_transition

A rich, convenient, easy-to-use flutter page transition package.

Pub Version Language License: MIT

README in Chinese

Some Demos

Getting Started

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_page_transition: ^0.1.0

You can also depend on this package stored in my repository:

flutter_page_transition:
  git:
    url: git://github.com/handoing/flutter_page_transition.git

You should then run flutter packages upgrade.

Transition Type

Page Transition Type Direction
slideInLeft ⬅️
slideInLeft ➡️
slideInUp ⬆️
slideInDown ⬇️
slideLeft ⬅️
slideRight ➡️
slideUp ⬆️
slideDown ⬇️
slideParallaxLeft ⬅️
slideParallaxRight ➡️
slideParallaxUp ⬆️
slideParallaxDown ⬇️
slideZoomLeft ⬅️
slideZoomRight ➡️
slideZoomUp ⬆️
slideZoomDown ⬇️
rippleRightUp ↖️
rippleLeftUp ↗️
rippleLeftDown ↘️
rippleRightDown ↙️
rippleMiddle 🎆
transferRight ⬅️
transferUp ⬆️
fadeIn
custom

Example

Use PageRouteBuilder Widget

initialRoute: 'Home',
onGenerateRoute: (RouteSettings routeSettings){
    return new PageRouteBuilder<dynamic>(
      settings: routeSettings,
      pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
        switch (routeSettings.name){
          case 'Home':
            return HomePage();
          case 'Other':
            return OtherPage();
          default:
            return null;
        }
      },
      transitionDuration: const Duration(milliseconds: 300),
      transitionsBuilder: (BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation, Widget child) {
          return effectMap[PageTransitionType.slideInLeft](Curves.linear, animation, secondaryAnimation, child);
      }
    );
}

// use Navigator
Navigator.of(context).pushNamed('Other');
// or
Navigator.of(context).push(PageTransition(type: PageTransitionType.slideInLeft, child: FirstPage()));

Create custom methods:

transitionEffect.createCustomEffect(
  handle: (Curve curve, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    return new SlideTransition(
      position: new Tween<Offset>(
        begin: const Offset(1.0, 0.0),
        end: const Offset(0.0, 0.0),
      ).animate(CurvedAnimation(parent: animation, curve: curve)),
      child: child,
    );
  }
);

// use custom
effectMap[PageTransitionType.custom](Curves.linear, animation, secondaryAnimation, child);

Test

run test

flutter test

Test Driver

run driver test

cd example/
flutter drive --target=test_driver/app.dart

License

MIT

You might also like...

A flutter widget to indicate loading progress. Easy to use, easy to extend

💙 👾 💫 A flutter widget to indicate loading progress. Easy to use, easy to extend

May 30, 2022

A cross-platform flutter package to convert your links into rich beautiful previews.

A cross-platform flutter package to convert your links into rich beautiful previews.

Link Preview Generator A cross-platform flutter package to convert your links into rich beautiful previews. This package is inspired from Any Link Pre

Oct 21, 2022

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

will cover the GetX Named Route, GetX Route Transition, GetX Route Result, GetX Route Argument, GetX Route Parameter etc.

 will cover the GetX Named Route, GetX Route Transition, GetX Route Result, GetX Route Argument, GetX Route Parameter etc.

getx_playground 1-navigation #2-reactiv A new Fl 3-SimpleStateManagement 4-GetXControllerExample 5- DependencyExample 6-TranslationExample 7-ThemeExam

Nov 11, 2022
Comments
  • Ripple from the middle?

    Ripple from the middle?

    The only ripple options available are Left, Right, LeftDown & RightDown Adding a middle ripple to the RippleClipper would be really helpful and convenient

    ex:

    Map center = <String, Offset>{
          'Left': Offset(0, size.height),
          'Right': Offset(size.width, size.height),
          'LeftDown': Offset(0, 0),
          'RightDown': Offset(size.width, 0),
          'Middle': Offset(size.width*0.5,size.height*0.5),
        };
    

    I'm not exactly sure but would that work?

    opened by TheArhaam 1
  • Migrate to Null Safety

    Migrate to Null Safety

    With the release of Flutter 2, it would be awesome if this library could be migrated to be null safe.

    More details: https://dart.dev/null-safety/migration-guide

    opened by felixgabler 1
Owner
Double Han
🇨🇳🇨🇳🇨🇳
Double Han
Flutter page route transition package, with 62 different transitions

Page Route Animator Package Flutter page route transition package, with 62 different page transitions. Examples Getting Started In the pubspec.yaml of

Mateen Mehmood 10 Nov 24, 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 TabBarController that is easy to use for flutter developers. 🥰 It supports various styles of page navigation, and you can also use it to customize your favorite styles. 🍻🍻

easy_tab_controller A user-friendly TabBarController widget for flutter developer. Getting Started This project is a starting point for a Flutter plug

圆号本昊 3 May 26, 2022
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 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

FlutterCandies 104 Jan 3, 2023
Biyi - a convenient translation and dictionary app written in Flutter

biyi_app Biyi is a convenient translation and dictionary app written in Flutter.

biyidev 892 Dec 28, 2022
A convenient code generator for app styleguide, gallery, wireframes and/or storyboard.

Framy A convenient code generator for app styleguide, gallery, wireframes and/or storyboard. ?? Official documentation ?? Packages In order to use Fra

Fidev 145 Dec 19, 2022
Ruqe brings the convenient types and methods found in Rust into Dart, such as the Result, Option, pattern-matching, etc.

ruqe Ruqe brings the convenient types and methods found in Rust into Dart, such as the Result, Option, pattern-matching, etc. Additionally, the librar

Alexander Nitiola 12 Dec 28, 2022
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