page_transition 2.2.0

Flutter Page Transition Package which is the transition second page

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