Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save rayliverified/49ed20727f82731e3b041610c2826616 to your computer and use it in GitHub Desktop.
Save rayliverified/49ed20727f82731e3b041610c2826616 to your computer and use it in GitHub Desktop.
navigation_utils use with page_transition library

1. Create a CustomPage for page_transition:

import 'package:flutter/material.dart';
import 'package:page_transition/page_transition.dart';

class PageTransitionLibraryPage extends Page {
  final Widget child;
  final PageTransitionType type;
  final Duration duration;
  final Alignment? alignment; // Optional alignment for certain transitions

  const PageTransitionLibraryPage({
    required this.child,
    required this.type,
    this.duration = const Duration(milliseconds: 300),
    this.alignment,
    LocalKey? key,
    String? name,
    Object? arguments,
  }) : super(key: key, name: name, arguments: arguments);

  @override
  Route createRoute(BuildContext context) {
    return PageTransition(
      type: type,
      duration: duration,
      alignment: alignment,
      settings: this,
      child: child,
    );
  }
}

2. Use the PageTransitionLibraryPage in NavigationData or globalPageBuilder:

Per-Page Example:

NavigationData(
  label: 'Page Transition Example',
  url: '/page-transition',
  builder: (context, routeData, globalData) => PageTransitionExamplePage(),
  pageBuilder: ({key, name, child, routeData, globalData, arguments}) {
    return PageTransitionLibraryPage(
      key: key,
      name: name,
      arguments: arguments,
      child: child,
      type: PageTransitionType.scale,
      alignment: Alignment.bottomCenter,
      duration: Duration(milliseconds: 500),
    );
  },
),

Global Example:

final CustomPageBuilder globalPageBuilder = ({
  key,
  name,
  child,
  routeData,
  globalData,
  arguments,
}) {
  return PageTransitionLibraryPage(
    key: key,
    name: name,
    arguments: arguments,
    child: child,
    type: PageTransitionType.fade,
    duration: Duration(milliseconds: 400),
  );
};

// In your main app initialization:
NavigationManager.init(
  mainRouterDelegate: DefaultRouterDelegate(
    navigationDataRoutes: routes,
    pageBuilder: globalPageBuilder,
  ),
  routeInformationParser: DefaultRouteInformationParser(),
);

Available PageTransitionTypes:

The page_transition library offers a variety of transition types, including:

  • fade
  • rightToLeft
  • leftToRight
  • upToDown
  • downToUp
  • scale
  • rotate
  • size
  • rightToLeftWithFade
  • leftToRightWithFade
  • And more!

Refer to the page_transition documentation for a complete list and more detailed customization options.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment