{"id":32274675,"url":"https://github.com/playx-flutter/playx_navigation","last_synced_at":"2026-02-22T18:01:31.700Z","repository":{"id":272183226,"uuid":"844929716","full_name":"playx-flutter/playx_navigation","owner":"playx-flutter","description":"Playx Navigation is a Flutter package that enhances app navigation with advanced features like route lifecycle management, custom transitions, and flexible configuration.","archived":false,"fork":false,"pushed_at":"2025-07-02T11:46:30.000Z","size":333,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-02T12:27:21.375Z","etag":null,"topics":["flutter","navigation"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/playx-flutter.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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,"zenodo":null}},"created_at":"2024-08-20T08:45:02.000Z","updated_at":"2025-07-02T11:46:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"f2000745-674b-4d51-9011-d6ebcbe6b858","html_url":"https://github.com/playx-flutter/playx_navigation","commit_stats":null,"previous_names":["playx-flutter/playx_navigation"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/playx-flutter/playx_navigation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playx-flutter%2Fplayx_navigation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playx-flutter%2Fplayx_navigation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playx-flutter%2Fplayx_navigation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playx-flutter%2Fplayx_navigation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/playx-flutter","download_url":"https://codeload.github.com/playx-flutter/playx_navigation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/playx-flutter%2Fplayx_navigation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29721046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-22T15:10:41.462Z","status":"ssl_error","status_checked_at":"2026-02-22T15:10:04.636Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["flutter","navigation"],"created_at":"2025-10-22T23:38:43.410Z","updated_at":"2026-02-22T18:01:31.690Z","avatar_url":"https://github.com/playx-flutter.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Playx Navigation\n[![pub package](https://img.shields.io/pub/v/playx_navigation.svg?color=1284C5)](https://pub.dev/packages/playx_navigation)\n\n**Playx Navigation** is a robust and flexible Flutter package that enhances the navigation capabilities of your Flutter applications. It builds on the `go_router` package to provide powerful features like route-specific lifecycle management with bindings, extensive route configuration options, and custom page transitions. With `Playx Navigation`, you can create a highly modular and maintainable navigation system for your apps.\n\n## Features\n\n-   **Route Bindings**: Attach custom logic to specific routes, handling lifecycle events such as entering or exiting a route.\n-   **Advanced Route Configuration**: Fine-tune the behavior of your routes with extensive configuration options, including custom transitions, modal behavior, and state management.\n-   **Route Management**: Easily navigate to routes, replace routes, and handle navigation stacks without the need for buildcontext.\n-   **Custom Page Transitions**: Use predefined transitions or create your own to enhance the user experience.\n\n## Installation\n\nAdd `Playx Navigation` to your `pubspec.yaml`:\n\n```yaml\ndependencies:\n  playx_navigation: ^0.0.1 \n```\nThen, run:\n\n```bash\nflutter pub get\n```\n\n## Setup\n\n### Step 1: Define Your Routes (Optional)\n\nYou can optionally define your route names and paths for easier management:\n\n```dart  \nabstract class Routes {  \n  static const home = 'home';  \n  static const products = 'products';  \n  static const details = 'productDetails';  \n}  \n  \nabstract class Paths {  \n  static const home = '/home';  \n  static const products = '/products';  \n  static const details = ':id';  \n}  \n```  \n\n### Step 2: Create Your Route Bindings\n\nCreate bindings for each route to handle lifecycle events such as entering or exiting a route. This ensures that your app's logic is properly managed.\n\n```dart\nclass ProductsBinding extends PlayxBinding {\n  @override\n  Future\u003cvoid\u003e onEnter(BuildContext context, GoRouterState state) async {\n    // Initialize resources for the products page.\n  }\n\n  @override\n  Future\u003cvoid\u003e onExit(BuildContext context) async {\n    // Clean up resources when leaving the products page.\n  }\n}\n```\n### Step 3 : Create Your `GoRouter` Instance\n\nUse the `PlayxRoute` to define your app's navigation structure:\n\n```dart  \nfinal router = GoRouter(  \n  initialLocation: Paths.home,  \n  debugLogDiagnostics: true,  \n  routes: [  \n    PlayxRoute(  \n      path: Paths.home,  \n      name: Routes.home,  \n      builder: (context, state) =\u003e const HomePage(),  \n      binding: HomeBinding(),  \n    ),  \n    PlayxRoute(  \n      path: Paths.products,  \n      name: Routes.products,  \n      builder: (context, state) =\u003e ProductsPage(),  \n      binding: ProductsBinding(),  \n      routes: [  \n        PlayxRoute(  \n          path: Paths.details,  \n          name: Routes.details,  \n          builder: (context, state) =\u003e   \n            ProductDetailsPage(product: state.extra as Product),  \n          binding: DetailsBinding(),  \n        ),  \n      ],  \n    ),  \n  ],  \n);  \n```  \n\n### Step 4 : Initialize `PlayxNavigationBuilder`\n\nWrap your `MaterialApp` or `CupertionApp` in `PlayxNavigationBuilder` and pass the router instance to it to enable Playx Navigation and manage route changes:\n\n```dart  \nclass MyApp extends StatelessWidget {  \n  const MyApp({super.key});  \n  \n  @override  \n  Widget build(BuildContext context) {  \n    return PlayxNavigationBuilder(  \n      router: router,  \n      builder: (context) {  \n        return MaterialApp.router(  \n          title: 'Playx',  \n          theme: ThemeData(  \n            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),  \n          ),  \n          routerDelegate: router.routerDelegate,  \n          routeInformationParser: router.routeInformationParser,  \n          routeInformationProvider: router.routeInformationProvider,  \n          backButtonDispatcher: router.backButtonDispatcher,  \n        );  \n      });  \n  }  \n}  \n```  \n\n`PlayxNavigationBuilder` simplifies the setup process by providing a centralized way to configure and manage routes, bindings, and other navigation-related settings.\n\n## PlayxNavigation Methods and Utilities\n\nThe `PlayxNavigation` class offers a variety of static methods for managing navigation within your Flutter application using the `GoRouter` package. Before utilizing any of these methods, ensure that `PlayxNavigation` has been initialized by calling `PlayxNavigation.boot()` or by including the `PlayxNavigationBuilder` widget in your widget tree.\n\n### Initialization\n\nBefore using any navigation methods, initialize `PlayxNavigation`:\n\n```dart\nPlayxNavigation.boot(router: yourGoRouterInstance);\n```\nAlternatively, use `PlayxNavigationBuilder` to automatically initialize the navigation system:\n\n```dart\nreturn PlayxNavigationBuilder(\n  router: router,\n  builder: (context) {\n    return MaterialApp.router(\n      routerDelegate: router.routerDelegate,\n      routeInformationParser: router.routeInformationParser,\n    );\n  });\n``` \n\n### Methods Overview\n\n-   **Navigating to Routes**\n    No need of BuildContext as you can call the navigation methods from anywhere.\n\n    -   **`to`**: Pushes a new route onto the navigation stack.\n\n          ```dart\n        await PlayxNavigation.to('/details', extra: {'id': 1});\n        ```\n    -   **`offAll`**: Replaces all previous routes in the stack with a new route.\n\n          ```dart\n        await PlayxNavigation.offAll('/home', extra: {'clearHistory': true});\n        ```\n\n    -   **`offAndTo`**: Replaces the current route with a new route.\n        ```dart\n        await PlayxNavigation.offAndTo('/profile', extra: {'userId': 123});\n        ```\n\n-   **Named Route Navigation**\n\n    -   **`toNamed**: Pushes a named route onto the navigation stack.\n        ```dart\n\t\tawait PlayxNavigation.toNamed('details', pathParameters: {'id': '1'});\n\t\t```\n\n    -   **`offAllNamed`**: Replaces all previous routes in the stack with a named route.\n\n          ```dart\n        await PlayxNavigation.offAllNamed('home');\n        ```\n\n    -   **`offAndToNamed`**: Replaces the current route with a named route.\n           ```dart\n             await PlayxNavigation.offAndToNamed('profile', pathParameters: {'userId': '123'});\n        ```\n\n-   **Navigation Control**\n\n    -   **`goToBranch`**: Navigates to the current location of the branch at the provided index of  `StatefulShellRoute`.\n    -\n    -   **`pop([T? result])`**: Pops the top-most route off the navigation stack.\n\n           ```dart\n         PlayxNavigation.pop();`\n           ```\n\n    -   **`canPop()`**: Returns `true` if there are routes in the navigation stack that can be popped.\n\n        ```dart\n        if (PlayxNavigation.canPop()) {\n          PlayxNavigation.pop();\n        }\n        ```\n\n\n### Accessing Current Route Information and Managing Route Changes\n\n-   **`currentRoute`**: Gets the current `RouteMatch` object representing the current route in the navigation stack.\n-   **`currentRouteName`**: Gets the name of the current route, if available.\n\n-   **`addRouteChangeListener(VoidCallback listener)`**: Adds a listener for route changes.\n-   **`removeRouteChangeListener(VoidCallback listener)`**: Removes a previously added route change listener.\n\n\n## Route Bindings\n\n### Managing Route Lifecycle with `PlayxBinding`\n\n`PlayxBinding` is an abstract class in the PlayxNavigation package designed to manage actions during a route's lifecycle. This includes initializing resources when a route is entered, handling tasks when it's revisited, pausing actions when it's hidden, and cleaning up when it's removed from the navigation stack.\n\n**Key Features:**\n\n- **Comprehensive Lifecycle Management:** Handle route lifecycle events such as entering, re-entering, hiding, and exiting.\n- **Subroute Awareness:** The `onExit` method of a main route is called only when the main route and all its subroutes are removed, ensuring effective resource management.\n\n### Lifecycle Methods\n\n1. **onEnter:** Triggered when the route is first entered. Use this to initialize resources or fetch data.\n2. **onReEnter:** Called when revisiting a route that is still in the stack but temporarily hidden.\n3. **onHidden:** Triggered when the route is hidden but not removed. Useful for pausing tasks or releasing temporary resources.\n4. **onExit:** Triggered when the route is permanently removed from the stack. Use this to clean up resources or save the state.\n\n**Example:**\n\n```dart\nclass MyRouteBinding extends PlayxBinding {\n  @override\n  Future\u003cvoid\u003e onEnter(BuildContext context, GoRouterState state) async {\n    // Initialize resources or fetch data for the route.\n  }\n\n  @override\n  Future\u003cvoid\u003e onReEnter(\n    BuildContext context,\n    GoRouterState? state,\n    bool wasPoppedAndReentered,\n  ) async {\n    // Handle special cases when the route is revisited.\n  }\n\n  @override\n  Future\u003cvoid\u003e onHidden(BuildContext context) async {\n    // Pause tasks or release temporary resources.\n  }\n\n  @override\n  Future\u003cvoid\u003e onExit(BuildContext context) async {\n    // Cleanup resources or save state when the route is exited.\n  }\n}\n```\n\n### Example Use Cases\n\n- **Data Fetching:** Fetch required data when a route is entered for the first time.\n- **Resource Cleanup:** Release heavy resources when the route is completely exited.\n- **Temporary Pauses:** Pause animations or background tasks when the route is hidden.\n- **Revisit Handling:** Refresh UI or state when the route is re-entered after being hidden.\n\nBy extending `PlayxBinding`, you can efficiently manage the lifecycle of your application's routes and ensure that resources are used optimally.\n\n##  Configuring Routes\n\n###  Advanced Routing and Custom Transitions with `PlayxRoute`\nThe `PlayxRoute` class extends the functionality of the `GoRoute` class, providing advanced features that allow developers to have granular control over routing in Flutter applications. With `PlayxRoute`, you can implement custom page transitions, bind route-specific lifecycle events, and configure page settings with ease.\n\n#### **Overview of PlayxRoute**\n\n`PlayxRoute` is designed to enhance navigation by offering:\n\n-   **Lifecycle Management**: Attach custom logic that runs when a route is entered or exited, enabling better control over the state and behavior of your app.\n-   **Page Configuration**: Customize various settings like page title, transition duration, and modal behavior.\n-   **Custom Transitions**: Apply predefined or custom animations for transitioning between pages.\n\n1.  **Lifecycle Management with PlayxBinding**\n\n    -   **onEnter and onExit**: Attach custom logic to handle what happens when a route is entered or exited. This is useful for managing resources, fetching data, or other setup/teardown tasks.\n    -   **Redirection Handling**: Implement custom redirection logic that can dynamically change the navigation flow based on your app's state.\n\n    **Example:**\n\n```dart\nPlayxRoute(\n      path: '/dashboard',\n      name: 'dashboard',\n      builder: (context, state) =\u003e DashboardPage(),\n      binding: DashboardBinding(), \n    );\n ```\nAs discussed in the previous Route Bindings section.\n#### 2. Custom Page Configuration with PlayxPageConfiguration\nThe PlayxPageConfiguration class allows you to fine-tune the behavior, transitions, and appearance of routes in your application. Whether you need to customize transition durations, manage the modal behavior of a route, or configure state management, PlayxPageConfiguration has you covered.\n\n**Key Configuration Options:**\n\n-   **Flexible Settings**: Adjust properties such as transition duration, modal behavior, and whether the route should be maintained in memory (`maintainState`).\n-   **Comprehensive Configuration**: Use `PlayxPageConfiguration` to set up the page title, key, and other important settings. This allows for detailed customization of each route.\n\n**Example:**\n\n```dart\nfinal config = PlayxPageConfiguration.customTransition(\n  transitionsBuilder: (context, animation, secondaryAnimation, child) {\n    return FadeTransition(opacity: animation, child: child);\n  },\n  transitionDuration: Duration(milliseconds: 500),\n  opaque: true,\n  fullscreenDialog: true,\n);\n```\nWith PlayxPageConfiguration, you have the flexibility to adjust nearly every aspect of how your routes are displayed and managed, ensuring that the navigation experience matches your application's needs.\n\n#### 3. Creating Custom Transitions\nOne of the standout features of PlayxRoute is its ability to define custom page transitions or leverage existing transition types like Material, Cupertino, and fade transitions.\n\n**Predefined Transition Types:**\n\n- Material: Standard Android-style transition.\n- Cupertino: iOS-style transition.\n-  Fade: A simple fade in/out transition.\n- Native: Automatically selects the appropriate transition based on the\n  platform.\n- None: Disables any transition effects.\n\n**Creating a Custom Transition:**\nTo create a custom transition, use the `PlayxPageConfiguration.customTransition` constructor. This allows you\nto define how the route should animate when it is pushed or popped.\n\nExample:\n\n```dart\nPlayxRoute(\n  path: '/custom',\n  name: 'customRoute',\n  builder: (context, state) =\u003e CustomPage(),\n  binding: CustomBinding(),\n  pageConfiguration: PlayxPageConfiguration.customTransition(\n    transitionsBuilder: (context, animation, secondaryAnimation, child) {\n      return ScaleTransition(scale: animation, child: child);\n    },\n    transitionDuration: Duration(milliseconds: 400),\n  ),\n)\n```\nIn this example, the route uses a ScaleTransition to animate the page with a custom scale effect. The transition duration is set to 400 milliseconds, providing a smooth and customized animation.\n\n\n\n\n## Support and Contribution[](https://pub.dev/packages/playx_navigation#support-and-contribution)\n\nFor questions, issues, or feature requests, visit the  [GitHub repository](https://github.com/playx-flutter/playx_navigation). Contributions are welcome!\n\n## See Also[](https://pub.dev/packages/playx_navigation#see-also)\n\n-   [Playx](https://pub.dev/packages/playx): Ecosystem for redundant features, less code, more productivity, better organizing.\n-   [Playx_core](https://pub.dev/packages/playx_core): Core of the Playx ecosystem, helping with app theming and localization.\n-   [Playx_localization](https://pub.dev/packages/playx_localization): Localization and internationalization for Flutter apps from the Playx ecosystem.\n\n## License[](https://pub.dev/packages/playx_navigation#license)\n\nThis project is licensed under the MIT License - see the  [LICENSE](https://github.com/playx-flutter/playx_navigation/blob/main/LICENSE)  file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplayx-flutter%2Fplayx_navigation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplayx-flutter%2Fplayx_navigation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplayx-flutter%2Fplayx_navigation/lists"}