Flutter Page Transition Package

A Flutter package that provides beautiful page transitions with an easy-to-use API.

flutter platform pub package BSD-2-Clause

Installation

dependencies:
  page_transition: ^latest_version

Usage

// Simple transition
context.pushTransition(
  type: PageTransitionType.fade,
  child: DetailScreen(),
);

// Using builder pattern
context.pushTransition(
  type: PageTransitionType.fade,
  childBuilder: (context) => DetailScreen(
    id: someId,
    title: someTitle,
  ),
);

// Push replacement
context.pushReplacementTransition(
  type: PageTransitionType.rightToLeft,
  child: DetailScreen(),
);

// Push and remove until
context.pushAndRemoveUntilTransition(
  type: PageTransitionType.fade,
  child: HomePage(),
  predicate: (route) => false,
);

// Named route with transition
context.pushNamedTransition(
  routeName: '/detail',
  type: PageTransitionType.fade,
  arguments: {'id': 1},
);

Traditional Usage

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

// Or using builder pattern
Navigator.push(
  context,
  PageTransition(
    type: PageTransitionType.fade,
    childBuilder: (context) => DetailScreen(id: someId),
  ),
);

Available Transition Types

  • fade
  • rightToLeft
  • leftToRight
  • topToBottom
  • bottomToTop
  • scale (with alignment)
  • rotate (with alignment)
  • size (with alignment)
  • rightToLeftWithFade
  • leftToRightWithFade
  • leftToRightJoined
  • rightToLeftJoined
  • topToBottomJoined
  • bottomToTopJoined
  • leftToRightPop
  • rightToLeftPop
  • topToBottomPop
  • bottomToTopPop

Additional Features

iOS Swipe Back

Enable iOS-style swipe back gesture:

context.pushTransition(
  type: PageTransitionType.rightToLeft,
  child: DetailScreen(),
  isIos: true,
);

Note: iOS swipe back works only with rightToLeft and fade transitions.

Inherit Theme

Use the parent's theme in the transition:

context.pushTransition(
  type: PageTransitionType.rightToLeft,
  child: DetailScreen(),
  inheritTheme: true,
);

Custom Duration and Curve

context.pushTransition(
  type: PageTransitionType.fade,
  child: DetailScreen(),
  duration: Duration(milliseconds: 300),
  curve: Curves.easeInOut,
);

Video Tutorial

Check out Johannes Milke's tutorial for a detailed walkthrough.

Contributing

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

License

BSD 2-Clause

Libraries

page_transition