{"id":17679454,"url":"https://github.com/jonaswanke/swipeable_page_route","last_synced_at":"2026-01-02T16:17:34.176Z","repository":{"id":45208795,"uuid":"258576839","full_name":"JonasWanke/swipeable_page_route","owner":"JonasWanke","description":"🔙 Swipe to navigate back and admire beautifully morphing widgets","archived":false,"fork":false,"pushed_at":"2025-03-10T05:16:25.000Z","size":1842,"stargazers_count":72,"open_issues_count":9,"forks_count":26,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T08:04:28.679Z","etag":null,"topics":["app-bar","dart","flutter","hacktoberfest","material-design","morphing","navigation","package","page-route","swipe","swipe-gestures","widgets"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/swipeable_page_route","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/JonasWanke.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":{"github":"JonasWanke"}},"created_at":"2020-04-24T17:20:31.000Z","updated_at":"2025-03-12T03:14:06.000Z","dependencies_parsed_at":"2023-12-30T09:32:30.862Z","dependency_job_id":"29f678e5-13a8-49a7-b001-9f6881526740","html_url":"https://github.com/JonasWanke/swipeable_page_route","commit_stats":{"total_commits":198,"total_committers":7,"mean_commits":"28.285714285714285","dds":"0.12121212121212122","last_synced_commit":"7c353ccf354356399c053f72edf49c3c86c16e82"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonasWanke%2Fswipeable_page_route","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonasWanke%2Fswipeable_page_route/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonasWanke%2Fswipeable_page_route/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonasWanke%2Fswipeable_page_route/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JonasWanke","download_url":"https://codeload.github.com/JonasWanke/swipeable_page_route/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247312077,"owners_count":20918344,"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":["app-bar","dart","flutter","hacktoberfest","material-design","morphing","navigation","package","page-route","swipe","swipe-gestures","widgets"],"created_at":"2024-10-24T08:42:01.850Z","updated_at":"2026-01-02T16:17:34.139Z","avatar_url":"https://github.com/JonasWanke.png","language":"Dart","funding_links":["https://github.com/sponsors/JonasWanke"],"categories":[],"sub_categories":[],"readme":"🔙 Swipe to navigate back and admire beautifully morphing widgets.\n\n\u003cimg src=\"https://github.com/JonasWanke/swipeable_page_route/raw/main/doc/demo.gif?raw=true\" width=\"400px\" alt=\"swipeable_page_route demo\" /\u003e\n\n## [`SwipeablePageRoute`]\n\n[`SwipeablePageRoute`] is a specialized [`CupertinoPageRoute`] that allows your users to go back by swiping anywhere on the current page. Use it instead of [`MaterialPageRoute`] or [`CupertinoPageRoute`]:\n\n```dart\nNavigator.of(context).push(SwipeablePageRoute(\n  builder: (BuildContext context) =\u003e MyPageContent(),\n));\n```\n\nIf your page contains horizontally scrollable content, you can limit [`SwipeablePageRoute`] to only react on drags from the start (left in LTR, right in RTL) screen edge — just like [`CupertinoPageRoute`]:\n\n```dart\nNavigator.of(context).push(SwipeablePageRoute(\n  canOnlySwipeFromEdge: true,\n  builder: (BuildContext context) =\u003e MyHorizontallyScrollablePageContent(),\n));\n```\n\nYou can get the [`SwipeablePageRoute`] wrapping your current page using `context.getSwipeablePageRoute\u003cT\u003e()`.\n\n\u003e To use swipeable pages with a [`PageTransitionsTheme`], use [`SwipeablePageTransitionsBuilder`].\n\u003e\n\u003e ⚠️ [`SwipeablePageTransitionsBuilder`] _must_ be set for [`TargetPlatform.iOS`].\n\u003e For all other platforms, you can decide whether you want to use it.\n\u003e This is because [`PageTransitionsTheme`] uses the builder for iOS whenever a pop gesture is in progress.\n\n### Usage with Go Router\n\nTo use swipeable pages with Flutter's [\u003ckbd\u003eGo Router\u003c/kbd\u003e], use [`SwipeablePage`] and the `pageBuilder` parameter in [`GoRoute`] instead of `builder`:\n\n```dart\n// Before, without swipeable pages:\nGoRoute(\n  builder: (context, state) =\u003e const MyScreen(),\n  // ...\n)\n\n// After, with swipeable pages:\nGoRoute(\n  pageBuilder: (context, state) =\u003e SwipeablePage(\n    builder: (context) =\u003e MyScreen(),\n  ),\n  // ...\n)\n```\n\n## [`MorphingAppBar`] \u0026 [`MorphingSliverAppBar`]\n\nAs you can see in the demo above, there's a beautiful animation happening to the app bar. That's a [`MorphingAppBar`]!\n\nYou can construct [`MorphingAppBar`] (corresponds to `AppBar`) and [`MorphingSliverAppBar`] (corresponds to `SliverAppBar`) just like the originals:\n\n```dart\nMorphingAppBar(\n  backgroundColor: Colors.green,\n  title: Text('My Page'),\n  actions: [\n    IconButton(\n      key: ValueKey('play'),\n      icon: Icon(Icons.play_arrow),\n      onPressed: () {},\n    ),\n    IconButton(\n      key: ValueKey('favorite'),\n      icon: Icon(Icons.favorite),\n      onPressed: () {},\n    ),\n    PopupMenuButton\u003cvoid\u003e(\n      key: ValueKey('overflow'),\n      itemBuilder: (context) =\u003e [\n        PopupMenuItem\u003cvoid\u003e(child: Text('Overflow action 1')),\n        PopupMenuItem\u003cvoid\u003e(child: Text('Overflow action 2')),\n      ],\n    ),\n  ],\n  bottom: TabBar(tabs: [\n    Tab(text: 'Tab 1'),\n    Tab(text: 'Tab 2'),\n    Tab(text: 'Tab 3'),\n  ]),\n)\n```\n\nBoth [`MorphingAppBar`]s internally use [`Hero`]s, so if you're not navigating directly inside a `MaterialApp`, you have to add a [`HeroController`] to your `Navigator`:\n\n```dart\nNavigator(\n  observers: [HeroController()],\n  onGenerateRoute: // ...\n)\n```\n\nTo animate additions, removals, and constants in your `AppBar`s `actions`, we compare them using [`Widget.canUpdate(Widget old, Widget new)`]. It compares `Widget`s based on their type and `key`, so it's recommended to give every action `Widget` a key (that you reuse across pages) for correct animations.\n\n[\u003ckbd\u003eGo Router\u003c/kbd\u003e]: https://pub.dev/packages/go_router\n[`GoRoute`]: https://pub.dev/documentation/go_router/latest/go_router/GoRoute-class.html\n\n\u003c!-- Flutter --\u003e\n\n[`CupertinoPageRoute`]: https://api.flutter.dev/flutter/cupertino/CupertinoPageRoute-class.html\n[`Hero`]: https://api.flutter.dev/flutter/widgets/Hero-class.html\n[`HeroController`]: https://api.flutter.dev/flutter/widgets/HeroController-class.html\n[`MaterialPageRoute`]: https://api.flutter.dev/flutter/material/MaterialPageRoute-class.html\n[`PageTransitionsTheme`]: https://api.flutter.dev/flutter/material/PageTransitionsTheme-class.html\n[`TargetPlatform.iOS`]: https://api.flutter.dev/flutter/foundation/TargetPlatform.html#iOS\n[`Widget.canUpdate(Widget old, Widget new)`]: https://api.flutter.dev/flutter/widgets/Widget/canUpdate.html\n\n\u003c!-- swipeable_page_route --\u003e\n\n[`MorphingAppBar`]: https://pub.dev/documentation/swipeable_page_route/latest/swipeable_page_route/MorphingAppBar-class.html\n[`MorphingSliverAppBar`]: https://pub.dev/documentation/swipeable_page_route/latest/swipeable_page_route/MorphingSliverAppBar-class.html\n[`SwipeablePage`]: https://pub.dev/documentation/swipeable_page_route/latest/swipeable_page_route/SwipeablePage-class.html\n[`SwipeablePageRoute`]: https://pub.dev/documentation/swipeable_page_route/latest/swipeable_page_route/SwipeablePageRoute-class.html\n[`SwipeablePageTransitionsBuilder`]: https://pub.dev/documentation/swipeable_page_route/latest/swipeable_page_route/SwipeablePageTransitionsBuilder-class.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonaswanke%2Fswipeable_page_route","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonaswanke%2Fswipeable_page_route","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonaswanke%2Fswipeable_page_route/lists"}