Flutter Page Transition Package

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

Installation

dependencies:
  page_transition: ^latest_version

Usage

Using Extensions (Recommended)

// 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