page_transition 1.0.9

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 96

Flutter Page Transition Package #

This package gives you beautiful page transitions.

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.0.9'

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'); 

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.

example/lib/main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(
        title: Text('Page Transition'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('Fade Second Page'),
              onPressed: () {
                Navigator.push(
                    context, PageTransition(type: PageTransitionType.fade, child: SecondPage()));
              },
            ),
            RaisedButton(
              child: Text('Left To Right Slide Second Page'),
              onPressed: () {
                Navigator.push(context,
                    PageTransition(type: PageTransitionType.leftToRight, child: SecondPage()));
              },
            ),
            RaisedButton(
              child: Text('Size Slide Second Page'),
              onPressed: () {
                Navigator.push(
                    context,
                    PageTransition(
                        alignment: Alignment.bottomCenter,
                        curve: Curves.bounceOut,
                        type: PageTransitionType.size,
                        child: SecondPage()));
              },
            ),
            RaisedButton(
              child: Text('Rotate Slide Second Page'),
              onPressed: () {
                Navigator.push(
                    context,
                    PageTransition(
                        curve: Curves.bounceOut,
                        type: PageTransitionType.rotate,
                        alignment: Alignment.topCenter,
                        child: SecondPage()));
              },
            ),
            RaisedButton(
              child: Text('Scale Slide Second Page'),
              onPressed: () {
                Navigator.push(
                    context,
                    PageTransition(
                        curve: Curves.linear,
                        type: PageTransitionType.scale,
                        alignment: Alignment.topCenter,
                        child: SecondPage()));
              },
            ),
            RaisedButton(
              child: Text('Up to Down Second Page'),
              onPressed: () {
                Navigator.push(
                    context,
                    PageTransition(
                        curve: Curves.linear,
                        type: PageTransitionType.upToDown,
                        child: SecondPage()));
              },
            ),
            RaisedButton(
              child: Text('Down to Up Second Page'),
              onPressed: () {
                Navigator.push(
                    context,
                    PageTransition(
                        curve: Curves.linear,
                        type: PageTransitionType.downToUp,
                        child: SecondPage()));
              },
            ),
          ],
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page Transition SecondPage'),
      ),
      body: Center(
        child: Text('Second Page'),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  page_transition: ^1.0.9

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages 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';
  
Version Uploaded Documentation Archive
1.0.9 Feb 28, 2019 Go to the documentation of page_transition 1.0.9 Download page_transition 1.0.9 archive
1.0.8 Feb 9, 2019 Go to the documentation of page_transition 1.0.8 Download page_transition 1.0.8 archive
1.0.7 Jan 7, 2019 Go to the documentation of page_transition 1.0.7 Download page_transition 1.0.7 archive
1.0.6 Dec 20, 2018 Go to the documentation of page_transition 1.0.6 Download page_transition 1.0.6 archive
1.0.5 Dec 15, 2018 Go to the documentation of page_transition 1.0.5 Download page_transition 1.0.5 archive
1.0.4 Dec 15, 2018 Go to the documentation of page_transition 1.0.4 Download page_transition 1.0.4 archive
1.0.3 Dec 15, 2018 Go to the documentation of page_transition 1.0.3 Download page_transition 1.0.3 archive
1.0.2 Dec 15, 2018 Go to the documentation of page_transition 1.0.2 Download page_transition 1.0.2 archive
1.0.1 Dec 14, 2018 Go to the documentation of page_transition 1.0.1 Download page_transition 1.0.1 archive
1.0.0 Dec 14, 2018 Go to the documentation of page_transition 1.0.0 Download page_transition 1.0.0 archive

All 13 versions...

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

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

  • Dart: 2.2.0
  • pana: 0.12.14
  • Flutter: 1.4.7

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/generated/i18n.dart.

Run flutter format to format lib/generated/i18n.dart.

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
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test