{"id":13550298,"url":"https://github.com/kalismeras61/flutter_page_transition","last_synced_at":"2025-04-13T23:42:05.359Z","repository":{"id":37334897,"uuid":"161785271","full_name":"kalismeras61/flutter_page_transition","owner":"kalismeras61","description":"This is Flutter Page Transition Package","archived":false,"fork":false,"pushed_at":"2024-12-27T05:47:39.000Z","size":873,"stargazers_count":483,"open_issues_count":6,"forks_count":58,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-30T20:01:41.846Z","etag":null,"topics":["alignment","curve","flutter-apps","flutter-package","flutter-plugin","flutter-transition","flutter-widget","scale"],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kalismeras61.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"patreon":"yasinilhan"}},"created_at":"2018-12-14T13:01:46.000Z","updated_at":"2025-03-12T23:58:01.000Z","dependencies_parsed_at":"2025-01-05T05:06:50.295Z","dependency_job_id":"e1e74b12-8a9a-4e9c-9e88-b67248226eaf","html_url":"https://github.com/kalismeras61/flutter_page_transition","commit_stats":{"total_commits":103,"total_committers":8,"mean_commits":12.875,"dds":"0.11650485436893199","last_synced_commit":"ac0410f345a91f2a8c4f31a5349dc3ee24f53c74"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalismeras61%2Fflutter_page_transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalismeras61%2Fflutter_page_transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalismeras61%2Fflutter_page_transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalismeras61%2Fflutter_page_transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kalismeras61","download_url":"https://codeload.github.com/kalismeras61/flutter_page_transition/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247550672,"owners_count":20956985,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alignment","curve","flutter-apps","flutter-package","flutter-plugin","flutter-transition","flutter-widget","scale"],"created_at":"2024-08-01T12:01:31.302Z","updated_at":"2025-04-06T21:03:23.042Z","avatar_url":"https://github.com/kalismeras61.png","language":"Dart","funding_links":["https://patreon.com/yasinilhan"],"categories":["Dart"],"sub_categories":[],"readme":"# Flutter Page Transition Package\n\nA Flutter package that provides beautiful page transitions with an easy-to-use API.\n\n[![flutter platform](https://img.shields.io/badge/Platform-Flutter-yellow.svg)](https://flutter.io)\n[![pub package](https://img.shields.io/pub/v/page_transition.svg)](https://pub.dartlang.org/packages/page_transition)\n[![BSD-2-Clause](https://img.shields.io/badge/BSD-2-Clause.svg?style=flat-square)](https://opensource.org/licenses/)\n\n## Installation\n\n```yaml\ndependencies:\n  page_transition: ^latest_version\n```\n\n## Usage\n\n### Using Extensions (Recommended)\n\n```dart\n// Simple transition\ncontext.pushTransition(\n  type: PageTransitionType.fade,\n  child: DetailScreen(),\n);\n\n// Using builder pattern\ncontext.pushTransition(\n  type: PageTransitionType.fade,\n  childBuilder: (context) =\u003e DetailScreen(\n    id: someId,\n    title: someTitle,\n  ),\n);\n\n// Push replacement\ncontext.pushReplacementTransition(\n  type: PageTransitionType.rightToLeft,\n  child: DetailScreen(),\n);\n\n// Push and remove until\ncontext.pushAndRemoveUntilTransition(\n  type: PageTransitionType.fade,\n  child: HomePage(),\n  predicate: (route) =\u003e false,\n);\n\n// Named route with transition\ncontext.pushNamedTransition(\n  routeName: '/detail',\n  type: PageTransitionType.fade,\n  arguments: {'id': 1},\n);\n```\n\n### Traditional Usage\n\n```dart\nNavigator.push(\n  context,\n  PageTransition(\n    type: PageTransitionType.fade,\n    child: DetailScreen(),\n  ),\n);\n\n// Or using builder pattern\nNavigator.push(\n  context,\n  PageTransition(\n    type: PageTransitionType.fade,\n    childBuilder: (context) =\u003e DetailScreen(id: someId),\n  ),\n);\n```\n\n### Using with Route Generation (GoRouter, AutoRoute, etc.)\n\n```dart\nMaterialApp(\n  onGenerateRoute: (settings) {\n    switch (settings.name) {\n      case '/details':\n        return PageTransition(\n          type: PageTransitionType.rightToLeftJoined,\n          childCurrent: context.currentRoute, // Get current route widget\n          child: DetailsPage(),\n          settings: settings,\n        );\n\n      case '/shared-axis':\n        // Example of shared axis transition\n        return PageTransition(\n          type: PageTransitionType.rightToLeftJoined,\n          childCurrent: context.currentRoute,\n          child: SharedAxisPage(),\n          settings: settings,\n          curve: Curves.easeInOut,\n          duration: Duration(milliseconds: 400),\n        );\n    }\n  },\n);\n```\n\n### Using with GoRouter\n\n```dart\nfinal router = GoRouter(\n  routes: [\n    GoRoute(\n      path: '/details/:id',\n      pageBuilder: (context, state) {\n        return PageTransition(\n          type: PageTransitionType.rightToLeftJoined,\n          childCurrent: context.currentRoute,\n          child: DetailsPage(id: state.params['id']),\n          settings: RouteSettings(name: state.location),\n        );\n      },\n    ),\n  ],\n);\n```\n\n### Using with AutoRoute\n\nFirst, define your routes:\n\n```dart\n@MaterialAutoRouter(\n  replaceInRouteName: 'Page,Route',\n  routes: \u003cAutoRoute\u003e[\n    AutoRoute(\n      page: HomePage,\n      initial: true,\n    ),\n    CustomRoute(\n      page: DetailsPage,\n      path: '/details/:id',\n      transitionsBuilder: (context, animation, secondaryAnimation, child) {\n        return PageTransition(\n          type: PageTransitionType.sharedAxisHorizontal,\n          child: child,\n        ).buildTransitions(\n          context,\n          animation,\n          secondaryAnimation,\n          child,\n        );\n      },\n    ),\n    CustomRoute(\n      page: ProfilePage,\n      path: '/profile',\n      transitionsBuilder: (context, animation, secondaryAnimation, child) {\n        return PageTransition(\n          type: PageTransitionType.sharedAxisVertical,\n          child: child,\n        ).buildTransitions(\n          context,\n          animation,\n          secondaryAnimation,\n          child,\n        );\n      },\n    ),\n  ],\n)\nclass $AppRouter {}\n```\n\nThen use it in your app:\n\n```dart\n@override\nWidget build(BuildContext context) {\n  return MaterialApp.router(\n    routerDelegate: _appRouter.delegate(),\n    routeInformationParser: _appRouter.defaultRouteParser(),\n  );\n}\n\n// Navigate using AutoRoute\ncontext.router.push(DetailsRoute(id: 123)); // Will use shared axis horizontal\ncontext.router.push(const ProfileRoute()); // Will use shared axis vertical\n```\n\n### Using with Navigation 2.0 (Router)\n\n```dart\nfinal router = GoRouter(\n  routes: [\n    GoRoute(\n      path: '/details/:id',\n      pageBuilder: (context, state) {\n        return PageTransition(\n          type: PageTransitionType.sharedAxisHorizontal,\n          child: DetailsPage(id: state.params['id']),\n          settings: RouteSettings(name: state.location),\n        );\n      },\n    ),\n  ],\n);\n```\n\n## Additional Features\n\n### iOS Swipe Back\n\nEnable iOS-style swipe back gesture:\n\n```dart\ncontext.pushTransition(\n  type: PageTransitionType.rightToLeft,\n  child: DetailScreen(),\n  isIos: true,\n);\n```\n\nNote: iOS swipe back works only with `rightToLeft` and `fade` transitions.\n\n### Inherit Theme\n\nUse the parent's theme in the transition:\n\n```dart\ncontext.pushTransition(\n  type: PageTransitionType.rightToLeft,\n  child: DetailScreen(),\n  inheritTheme: true,\n);\n```\n\n### Custom Duration and Curve\n\n```dart\ncontext.pushTransition(\n  type: PageTransitionType.fade,\n  child: DetailScreen(),\n  duration: Duration(milliseconds: 300),\n  curve: Curves.easeInOut,\n);\n```\n\n## Advanced Usage\n\n### Shared Axis Transitions\n\nMaterial Design 3 style shared axis transitions:\n\n```dart\n// Horizontal shared axis\ncontext.pushTransition(\n  type: PageTransitionType.sharedAxisHorizontal,\n  child: DetailScreen(),\n  duration: Duration(milliseconds: 400),\n  curve: Curves.easeInOut,\n);\n\n// Vertical shared axis\ncontext.pushTransition(\n  type: PageTransitionType.sharedAxisVertical,\n  child: DetailScreen(),\n);\n\n// Scale shared axis\ncontext.pushTransition(\n  type: PageTransitionType.sharedAxisScale,\n  child: DetailScreen(),\n);\n```\n\n### Nested Navigation with Named Routes\n\n```dart\nMaterialApp(\n  onGenerateRoute: (settings) {\n    switch (settings.name) {\n      case '/details':\n        return PageTransition(\n          type: PageTransitionType.sharedAxisHorizontal,\n          settings: settings,\n          child: DetailsPage(),\n        );\n      case '/profile/settings':\n        return PageTransition(\n          type: PageTransitionType.sharedAxisVertical,\n          settings: settings,\n          child: SettingsPage(),\n        );\n    }\n  },\n);\n\n// Navigate using extensions\ncontext.pushNamedTransition(\n  routeName: '/details',\n  type: PageTransitionType.sharedAxisHorizontal,\n  arguments: {'id': 123},\n);\n```\n\n### Using with GoRouter\n\n```dart\nfinal router = GoRouter(\n  routes: [\n    GoRoute(\n      path: '/details/:id',\n      pageBuilder: (context, state) {\n        return PageTransition(\n          type: PageTransitionType.rightToLeftJoined,\n          childCurrent: context.currentRoute,\n          child: DetailsPage(id: state.params['id']),\n          settings: RouteSettings(name: state.location),\n        );\n      },\n    ),\n  ],\n);\n```\n\n### Using with AutoRoute\n\n```dart\nfinal router = GoRouter(\n  routes: [\n    GoRoute(\n      path: '/details/:id',\n      pageBuilder: (context, state) {\n        return PageTransition(\n          type: PageTransitionType.rightToLeftJoined,\n          childCurrent: context.currentRoute,\n          child: DetailsPage(id: state.params['id']),\n          settings: RouteSettings(name: state.location),\n        );\n      },\n    ),\n  ],\n);\n```\n\n### Using with Navigation 2.0 (Router)\n\n```dart\nfinal router = GoRouter(\n  routes: [\n    GoRoute(\n      path: '/details/:id',\n      pageBuilder: (context, state) {\n        return PageTransition(\n          type: PageTransitionType.sharedAxisHorizontal,\n          child: DetailsPage(id: state.params['id']),\n          settings: RouteSettings(name: state.location),\n        );\n      },\n    ),\n  ],\n);\n```\n\n## Resources\n\n### Video Tutorial\n\nCheck out [Johannes Milke's tutorial](https://www.youtube.com/watch?v=q-e5t3qnB_M) for a detailed walkthrough.\n\n## Contributing\n\nPull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.\n\n## License\n\n[BSD 2-Clause](https://opensource.org/licenses/BSD-2-Clause)\n\n## Performance Tips\n\nFor optimal performance:\n\n1. Keep transition durations short (200-300ms)\n2. Use simpler curves like `Curves.easeOut`\n3. Avoid complex transitions for frequent navigation\n4. Consider using `childBuilder` for lazy widget construction\n5. Use `RepaintBoundary` on heavy widgets being transitioned\n\n```dart\ncontext.pushTransition(\n  type: PageTransitionType.fade, // Simpler transitions are more performant\n  duration: Duration(milliseconds: 200),\n  curve: Curves.easeOut,\n  child: RepaintBoundary(\n    child: HeavyWidget(),\n  ),\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkalismeras61%2Fflutter_page_transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkalismeras61%2Fflutter_page_transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkalismeras61%2Fflutter_page_transition/lists"}