{"id":22881230,"url":"https://github.com/hey24sheep/backdrop_modal_route","last_synced_at":"2025-05-07T03:09:02.485Z","repository":{"id":56826425,"uuid":"262997625","full_name":"hey24sheep/backdrop_modal_route","owner":"hey24sheep","description":"Flutter plugin to open backdrop modal route with minimal code and efforts with dynamic content","archived":false,"fork":false,"pushed_at":"2023-10-12T06:41:18.000Z","size":3781,"stargazers_count":12,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T03:08:55.780Z","etag":null,"topics":["android","backdrop","bottomsheet","dart","flutter","flutter-package","flutter-plugin","ios","material"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/backdrop_modal_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/hey24sheep.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":"hey24sheep","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["https://ko-fi.com/hey24sheep","https://paypal.me/hey24sheep"]}},"created_at":"2020-05-11T09:29:17.000Z","updated_at":"2022-11-28T09:16:25.000Z","dependencies_parsed_at":"2024-12-13T17:32:52.997Z","dependency_job_id":"5357c444-497b-4b00-830f-4790fbe743f1","html_url":"https://github.com/hey24sheep/backdrop_modal_route","commit_stats":{"total_commits":20,"total_committers":2,"mean_commits":10.0,"dds":0.09999999999999998,"last_synced_commit":"ce826ac6c727cbc379d338145d23bd9c5cfce4e1"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hey24sheep%2Fbackdrop_modal_route","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hey24sheep%2Fbackdrop_modal_route/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hey24sheep%2Fbackdrop_modal_route/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hey24sheep%2Fbackdrop_modal_route/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hey24sheep","download_url":"https://codeload.github.com/hey24sheep/backdrop_modal_route/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252804217,"owners_count":21806770,"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":["android","backdrop","bottomsheet","dart","flutter","flutter-package","flutter-plugin","ios","material"],"created_at":"2024-12-13T17:32:05.901Z","updated_at":"2025-05-07T03:09:02.465Z","avatar_url":"https://github.com/hey24sheep.png","language":"Dart","funding_links":["https://github.com/sponsors/hey24sheep","https://ko-fi.com/hey24sheep","https://paypal.me/hey24sheep","https://ko-fi.com/J3J6Q1QXE"],"categories":[],"sub_categories":[],"readme":"# Backdrop Modal Route\n[![pub package publisher](https://img.shields.io/badge/pub.dev-01579b.svg?style=flat-square\u0026logo=dart\u0026logoColor=white)](https://pub.dev/publishers/hey24sheep.com/packages)\n[![pub package](https://img.shields.io/pub/v/backdrop_modal_route.svg?style=flat-square)](https://pub.dartlang.org/packages/backdrop_modal_route)\n[![GitHub Stars](https://img.shields.io/github/stars/hey24sheep/backdrop_modal_route.svg?style=flat-square\u0026logo=github)](https://github.com/hey24sheep/backdrop_modal_route)\n[![Platform](https://img.shields.io/badge/platform-android%20|%20ios-green.svg?style=flat-square\u0026color=9cf)](https://img.shields.io/badge/platform-Android%20%7C%20iOS-green.svg)\n\n\u003ca href=\"https://ko-fi.com/J3J6Q1QXE\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/badge/buymeacoffee-F5E800.svg?style=for-the-badge\u0026logoColor=white\u0026logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwABOvYAATr2ATqxVzoAAAAHdElNRQfnAhALDBqwztzyAAADc0lEQVRo3u2YW0hUQRjHf3tRu5FmNytKSO2qkGKmFWRBURFdBIsgepEi6NGHeowg6K2XqCfBfPHFBH3oihaKRiVKiaHlRnbVzPJSu+u6u6cH181zzuzZOVurPZz/sMvOzP+b73++OTPzzYIFCxYsWJhl2EimmJVx9hLgPT18wC/qvIQHJe5lHBeVHCNVL+DVDLj/I+Mxx5mvFvB2BgUoKHioImu6gL4ZFqCg8IyCPwI+zoIAhU62Tgn4MisCFFpYDWDHHuclGAnbuYATbAyyJE4uJqjChR1wsIG9Oj/fKaURhgwD5cONX9AexIsbL0EDWze7ws6c7KFZx67E4Yw4BR6e0EobI6yggG3kMifUM85zGmjFSxKFHCCfhKjR8NPIG25wSNVazCYYEarv5TQLplFTOEU7CgqvKCN5Wk8q5QxEjcAkNtOjYkxQDmMC08/sFTxFBnXcI1vXbuOkcCL1AqBcw6kHt8D0SoRALmGZsN3OVUkBBfxQcbrs2HSkIWojCPjGV2F7kBq+RX0PAFy8U9VTRAJ6eSM12HR081qK52ZEVV8sEuBlwrQAP+NSvCTmqeoOkYAEHKYF2ATjiJDGKlV9RLQLpGtIMkhhqRQvU7MffhdFYDn5pgXkkiHBsrOPRFXLO5EAJ0dJMuU+kdLwPmmEHZxQ1YM0QUCwgoc5YkpACaMS+0A2LRpGH1uIcJy0sc5E+LuibsXJnOCFjlGBw0Ywwvt7lzN8knC/kQqKhD0TXOclNhJZyEEKdZPUTwlPMDhOb7MiqvssHsWYEQW4PPnoRid6bZQFuZaHMadkNVN3hIAhrY41Bu4fxOz+HulTw/ijUO+rs/gwMmN+eh/VkwmpnACFJnJ07tfTGKP7Pi6qEhp8EkbPNXtjNs0xuPbj4ho52lXnlTLuZGfYYgtPpWyC+Angw8MQbVRzjrWiDPSXpP5e9gNQRIekxXvOcpLD7CaPRZFP2FHJ4RQ+cIoSTVppVNpFl3E9hk3MopufJthNmuRDCDtuGZUhzNXe7Q0xiE9GQL+JIc2hQ/yXjFbAHZS4uB/gjhwxD1eMW4pxuSmfWZYJb0d/V55JpWghJHCe/n/o3E8DebLObaE3oYhz7CbNIGxK+DvyL/DQST23GDQnAMBJJjmsDOUHQQh9T+ULQd1H1DJKN2PywbdgwYIFC/8BfgOoCejMt+kv6wAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMy0wMi0xNlQxMToxMjoyNSswMDowMACYcDAAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjMtMDItMTZUMTE6MTI6MjUrMDA6MDBxxciMAAAAIHRFWHRzb2Z0d2FyZQBodHRwczovL2ltYWdlbWFnaWNrLm9yZ7zPHZ0AAAAYdEVYdFRodW1iOjpEb2N1bWVudDo6UGFnZXMAMaf/uy8AAAAYdEVYdFRodW1iOjpJbWFnZTo6SGVpZ2h0ADUxMo+NU4EAAAAXdEVYdFRodW1iOjpJbWFnZTo6V2lkdGgANTEyHHwD3AAAABl0RVh0VGh1bWI6Ok1pbWV0eXBlAGltYWdlL3BuZz+yVk4AAAAXdEVYdFRodW1iOjpNVGltZQAxNjc2NTQ1OTQ14l6OBQAAABJ0RVh0VGh1bWI6OlNpemUAOTUwMkJC9h0QPgAAAEV0RVh0VGh1bWI6OlVSSQBmaWxlOi8vLi91cGxvYWRzLzU2L1hjQ3Bmd3ovMzkxMi9rb2ZpX2xvZ29faWNvbl8yNDc4OTQucG5nH4ex2wAAAABJRU5ErkJggg==\u0026logoColor=white\" alt=\"Buy Me A Coffee\" height=\"41\" width=\"174\"\u003e\n\u003c/a\u003e\n\n**Get best of both worlds, backdrop with actual backdrop unlike material design and non sticky bottom sheet**\n\nThis flutter package will help you create **backdrop modal route** or **non sticky bottom sheet** with **minimal code and efforts with dynamic content**. \n\n- **Android and IOS**\n- **simple and easy**\n- **no other dependencies**\n- **well documented**\n- **production-ready**\n\nThis package was created as a need for our in-production app, as there is no single solution which gives you a route enabled bottom-sheet or backdrop which is route enabled and a new page with an actual backdrop unlike material design.\n\n\u003cp\u003e\n\u003cimg src=\"https://github.com/hey24sheep/backdrop_modal_route/raw/master/screenshots/example1.gif\" width=\"220\" height=\"440\" /\u003e\n\u003cimg src=\"https://github.com/hey24sheep/backdrop_modal_route/raw/master/screenshots/example2.gif\" width=\"220\" height=\"440\" /\u003e\n\u003cimg src=\"https://github.com/hey24sheep/backdrop_modal_route/raw/master/screenshots/example3.gif\" width=\"220\" height=\"440\" /\u003e\n\u003cimg src=\"https://github.com/hey24sheep/backdrop_modal_route/raw/master/screenshots/example4.gif\" width=\"220\" height=\"440\" /\u003e\n\u003c/p\u003e\n\n## Installation\n\nWith `null-safety`\n\n```dart\n      dependencies:\n        backdrop_modal_route: ^2.0.1\n```\n\nWithout `null-safety`\n      \n```dart\n      dependencies:\n        backdrop_modal_route: 1.1.0\n```\n      \n## Getting Started\n\nAdd the dependency to your project and start using **Backdrop Modal Route** everywhere:\n\nImport the package.\n\n```dart\nimport 'package:backdrop_modal_route/backdrop_modal_route.dart';\n```\n\nOpen backdrop with your custom widget which could be stateful/stateless.\n\n```dart\n// with custom return type T\nfinal result = await Navigator.push(\n      context,\n      BackdropModalRoute\u003cT\u003e(\n        overlayContentBuilder: (context) =\u003e \n            YourStatelessOrStatefulBackdropOverlayContentWidget(),\n      ),\n    );\n```\n\nOpen backdrop with inline widget\n\n```dart\n// with inline widget\nawait Navigator.push(\n      context,\n      BackdropModalRoute\u003cvoid\u003e(\n        overlayContentBuilder: (context) {\n          return Container(\n            alignment: Alignment.center,\n            padding: const EdgeInsets.all(24),\n            child: RaisedButton(\n                onPressed: () =\u003e Navigator.pop(context),\n                child: Text('Inline Close'),\n            ),\n          );\n        },\n      ),\n    );\n```\n\n### Creating custom block modal transitions\n\n```dart\n// ... more code\ncustomBuildBlockModalTransitions:\n    (context, animation, secondaryAnimation, child) {\n    return RotationTransition(\n        turns: animation,\n        child: child,\n    );\n},\n// ... more code\n\n```\n\nFor more details have a look at the other [examples](https://github.com/hey24sheep/backdrop_modal_route/tree/master/example).\n\n## Properties\n| Property                          | Type         | Default                           |                                                           Note |\n| ------------------------          |:------------:| --------------------------------: | -------------------------------------------------------------: |\n| DEFAULT_BACKDROP_TOP_PADDING      | double       | 56.0                              |                                                                |\n| overlayContentBuilder (required)  | Function     | you implement it                  |                                                                |\n| backgroundColor                   | Color        | White                             |                                                                |\n| topPadding                        | double       | 56.0                              |                                                                |\n| barrierOpacity                    | double       | 0.5                               |                                                                |\n| transitionDurationVal             | Duration     | milliseconds:500                  |                                                                |\n| isOpaque                          | boolean      | false                             |                                                                |\n| canBarrierDismiss                 | boolean      | true                              |                                                                |\n| barrierColorVal                   | Color        | black.withOpacity(barrierOpacity) |                                                                |\n| barrierLabelVal                   | String       | null                              |                                                                |\n| shouldMaintainState               | bool         | true                              |                                                                |\n| backdropShape                     | ShapeBorder  | RoundedRectangleBorder            |                                                                |\n| safeAreaLeft                      |     bool     |            true                   |                     Set as 'false' to disable 'Left' Safe Area |\n| safeAreaTop                       |     bool     |            true                   | Set as 'false' to disable 'Top' (usually status bar) Safe Area |\n| safeAreaRight                     |     bool     |            true                   |                    Set as 'false' to disable 'Right' Safe Area |\n| safeAreaBottom                    |     bool     |            true                   |                   Set as 'false' to disable 'Bottom' Safe Area |\n| safeAreaMinimumPadding            |  EdgeInsets  | topPadding                        | 'topPadding' is used to set this. Default 56.0.                |\n| safeAreaMaintainBottomViewPadding |     bool     |           false                   |                                                                |\n| isSlideTransitionDefault          |     bool     |           true                    | Toggle between slide or fade transition                        |\n| buildBlockModalTransitions        |   Function   |               -                   | Use this to create custom transition other than fade/slide     |\n\n## FAQ\nQ. How to hide content using scroll ?\u003c/br\u003e\nA. You have to implement it yourself and you could add it as parent of OverlayContent.\n   Check this [#1](https://github.com/hey24sheep/backdrop_modal_route/issues/1)\n\n## Improve\n\nHelp me by reporting bugs, **submit new ideas** for features or anything else that you want to share.\n\n- Just [write an issue](https://github.com/hey24sheep/backdrop_modal_route/issues) on GitHub. ✏️\n- And don't forget to hit the **like button** for this package ✌️\n\n## More\n\nCheck out my other useful packages on [pub.dev](https://pub.dev/publishers/hey24sheep.com/packages)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhey24sheep%2Fbackdrop_modal_route","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhey24sheep%2Fbackdrop_modal_route","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhey24sheep%2Fbackdrop_modal_route/lists"}