page_transition 1.1.5

  • Readme
  • Changelog
  • Example
  • Installing
  • 98

Flutter Page Transition Package #

This package gives you beautiful page transitions. <br/><br/>

flutter platform pub package BSD-2-Clause

Demo #

Usage #

It is really easy to use! You should ensure that you add the page_transition as a dependency in your flutter project.

dependencies:
  page_transition: "^1.1.5"

Than you can use it with below examples.

Navigator.push(context, PageTransition(type: PageTransitionType.fade, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.leftToRight, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeft, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.upToDown, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.downToUp, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.scale, alignment: Alignment.bottomCenter, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.size, alignment: Alignment.bottomCenter, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.rotate, duration: Duration(second: 1), child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeftWithFade, child: DetailScreen()));

Navigator.push(context, PageTransition(type: PageTransitionType.leftToRightWithFade, child: DetailScreen()));

Usage for predefined routes #

First, define the onGenerateRoute property in the MaterialApp widget like below and in switch cases you can transition to your new routes:

  onGenerateRoute: (settings) {
    switch (settings.name) {
      case '/second':
        return PageTransition(child: SecondPage(), type: PageTransitionType.scale);
        break;
      default:
        return null;
    }
  },

After that you can use your new route like this:

Navigator.pushNamed(context, '/second');

Usage predefined routes with RouteSettings #

First, define the onGenerateRoute property in the MaterialApp widget like below and in switch cases you can transition to your new routes:

   onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/second':
            return PageTransition(
              child: SecondPage(),
              type: PageTransitionType.scale,
              settings: settings,
            );
            break;
          default:
            return null;
        }
      },

After that you can use your new route like this:

Navigator.pushNamed(context, '/second', arguments: "arguments data");

for more detail you can look example project.

Types of transitions #

  • fade
  • rightToLeft
  • leftToRight
  • upToDown
  • downToUp
  • scale (with alignment)
  • rotate (with alignment)
  • size (with alignment)
  • rightToLeftWithFade,
  • leftToRightWithFade,

Curves #

You can use any type of CurvedAnimation curves.

Alignments #

You can use size, scale and rotate transform alignment

Contributing #

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License #

BSD 2-Clause

[0.0.1] - Add release date.

  • TODO: Describe initial release.

[0.0.2] - New Class name and more

  • Change to class name PageTransition
  • Add new transition
  • Add new tag for Curve animation
  • Add new tag name 'type' for select type of transition

[0.0.3] - New Transition Added and some Changes

  • New Transition added UpToDown and DownToUp,
  • transform transition name change with rotate
  • Add for Scale Transition alignment property

[1.0.1] - TODO: Bug fixes and stable version

  • some bug fixes
  • stable version

[1.0.2] - New Property and README file improvement

  • New property is duration added now you can set duration of Transition
  • Readme.md file is improvement and showing how to use it for Named routes.

[1.0.3] - New Property and README file improvement

  • PageTransitionType added now you can choose easy to you transition type.

[1.0.3] - New Property and README file improvement

  • PageTransitionType added now you can choose easy to you transition type.

[1.0.5] - Some changes

  • Change to README.md.

[1.0.6] - Some changes

  • performance improvement

[1.0.9] - Some changes

  • performance improvement
  • Upgrade package
  • Black screen appears problem solved.

[1.1.0] - Some changes

  • Fix i18n file problem

[1.1.1] - Update latest dependency

  • Updated.

[1.1.3] - Update latest dependency

  • Added route settings and fix example app.

[1.1.4] - Update latest dependency

  • Delete route settings will be added as soon.

[1.1.5] - Update latest dependency and added RouteSettings

  • add route settings and now you can send arguments.

example/README.md

example1 #

A new Flutter project.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

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


dependencies:
  page_transition: ^1.1.5

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:page_transition/page_transition.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
96
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
98
Learn more about scoring.

We analyzed this package on Oct 18, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health issues and suggestions

Document public APIs. (-1 points)

21 out of 21 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test