page_transition

The package supports Material Design 3 style shared axis transitions:

• PageTransitionType.sharedAxisHorizontal
• PageTransitionType.sharedAxisVertical
• PageTransitionType.sharedAxisScale

// Horizontal shared axis
context.pushTransition(
  type: PageTransitionType.sharedAxisHorizontal,
  child: DetailScreen(),
  duration: Duration(milliseconds: 400),
  curve: Curves.easeInOut,
);

// Vertical shared axis
context.pushTransition(
  type: PageTransitionType.sharedAxisVertical,
  child: DetailScreen(),
);

// Scale shared axis
context.pushTransition(
  type: PageTransitionType.sharedAxisScale,
  child: DetailScreen(),
);

Add page_transition to your Flutter project's dependencies in pubspec.yaml.

dependencies:
  page_transition: ^latest_version

You can enable iOS-style swipe back gestures by setting isIos: true in the transition configuration.

Note: This feature only works with PageTransitionType.rightToLeft and PageTransitionType.fade transitions.

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

When using GoRouter, use the pageBuilder property of a GoRoute to return a PageTransition widget. For joined transitions (like rightToLeftJoined), you must provide childCurrent using context.currentRoute to allow the transition to animate between the existing and new route.

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/details/:id',
      pageBuilder: (context, state) {
        return PageTransition(
          type: PageTransitionType.rightToLeftJoined,
          childCurrent: context.currentRoute,
          child: DetailsPage(id: state.params['id']),
          settings: RouteSettings(name: state.location),
        );
      },
    ),
  ],
);

To change the launch screen image for the iOS version of your Flutter app, you can either replace the image files directly in the directory or use Xcode.

Method 1: Direct File Replacement Replace the existing image files within the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory with your own assets.

Method 2: Using Xcode (Recommended for visual management)

1. Open your Flutter project's iOS workspace by running open ios/Runner.xcworkspace in your terminal.
2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
3. Drag and drop your desired images into the asset catalog to replace the launch images.

To ensure smooth animations and high performance:

1. Keep durations short (200-300ms).
2. Use simple curves like Curves.easeOut.
3. Use childBuilder for lazy widget construction to avoid heavy upfront builds.
4. Wrap heavy widgets in a RepaintBoundary to prevent unnecessary repaints during the transition.

context.pushTransition(
  type: PageTransitionType.fade,
  duration: Duration(milliseconds: 200),
  curve: Curves.easeOut,
  child: RepaintBoundary(
    child: HeavyWidget(),
  ),
);

Set inheritTheme: true to ensure the transition uses the parent's theme.

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

If you prefer not to use extensions, you can use the standard Navigator.push method by passing a PageTransition widget.

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

The PageTransition class extends PageRouteBuilder to provide various pre-defined animation types for navigating between routes in Flutter. You can provide the next page either as a direct child widget or via a childBuilder function.

Constraints:

• You must provide either child or childBuilder, but not both.
• If inheritTheme is set to true, you must provide a ctx (BuildContext).
• Certain transition types require additional parameters (e.g., scale, rotate, and size require alignment; joined or pop types require childCurrent).

// Example using child
PageTransition(
  type: PageTransitionType.rightToLeft,
  child: DetailPage(),
)

// Example using builder
PageTransition(
  type: PageTransitionType.rightToLeft,
  builder: (context) => DetailPage(),
)