{"id":23480489,"url":"https://github.com/yelmuratoff/draggable_panel","last_synced_at":"2025-10-31T04:30:55.931Z","repository":{"id":268609318,"uuid":"904914727","full_name":"yelmuratoff/draggable_panel","owner":"yelmuratoff","description":"A versatile and customizable Draggable Panel","archived":false,"fork":false,"pushed_at":"2025-10-15T07:22:21.000Z","size":546,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-15T15:39:23.607Z","etag":null,"topics":["draggable","draggable-panel","floating-button","floating-panel","panel"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/draggable_panel","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/yelmuratoff.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-12-17T19:46:45.000Z","updated_at":"2025-10-15T07:22:24.000Z","dependencies_parsed_at":"2024-12-17T20:47:55.090Z","dependency_job_id":"0023a39d-58cb-4626-9349-15d74061459b","html_url":"https://github.com/yelmuratoff/draggable_panel","commit_stats":null,"previous_names":["yelmuratoff/draggable_panel"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yelmuratoff/draggable_panel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yelmuratoff%2Fdraggable_panel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yelmuratoff%2Fdraggable_panel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yelmuratoff%2Fdraggable_panel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yelmuratoff%2Fdraggable_panel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yelmuratoff","download_url":"https://codeload.github.com/yelmuratoff/draggable_panel/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yelmuratoff%2Fdraggable_panel/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281366842,"owners_count":26488696,"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","status":"online","status_checked_at":"2025-10-27T02:00:05.855Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["draggable","draggable-panel","floating-button","floating-panel","panel"],"created_at":"2024-12-24T20:14:44.117Z","updated_at":"2025-10-31T04:30:55.926Z","avatar_url":"https://github.com/yelmuratoff.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/yelmuratoff/draggable_panel\" align=\"center\"\u003e\n        \u003cimg src=\"https://github.com/yelmuratoff/draggable_panel/blob/main/assets/draggable_panel.png?raw=true\" width=\"400px\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\u003c/div\u003e\n\n\u003ch2 align=\"center\"\u003e A versatile and customizable Draggable Panel 🚀 \u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\nDraggablePanel is a versatile and interactive widget for Flutter that allows you to create floating, draggable panels that can dock to the nearest edge of the screen. The panel is ideal for displaying additional content, actions, or tools that can be accessed on demand.\n\nYour feedback is highly valued as it will help shape future updates and ensure the package remains relevant and useful. 😊\n\n   \u003cbr\u003e\n   \u003cspan style=\"font-size: 0.9em\"\u003e Show some ❤️ and \u003ca href=\"https://github.com/yelmuratoff/draggable_panel.git\"\u003estar the repo\u003c/a\u003e to support the project! \u003c/span\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://pub.dev/packages/draggable_panel\"\u003e\u003cimg src=\"https://img.shields.io/pub/v/draggable_panel.svg\" alt=\"Pub\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"License: MIT\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/yelmuratoff/draggable_panel\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/yelmuratoff/draggable_panel?style=social\" alt=\"Pub\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://pub.dev/packages/draggable_panel/score\"\u003e\u003cimg src=\"https://img.shields.io/pub/likes/draggable_panel?logo=flutter\" alt=\"Pub likes\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://pub.dev/packages/draggable_panel/score\"\u003e\u003cimg src=\"https://img.shields.io/pub/points/draggable_panel?logo=flutter\" alt=\"Pub points\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n## 📜 Showcase\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/yelmuratoff/draggable_panel/blob/main/assets/idle.png?raw=true\" width=\"200\" style=\"margin: 5px;\" /\u003e\n  \u003cimg src=\"https://github.com/yelmuratoff/draggable_panel/blob/main/assets/drag.png?raw=true\" width=\"200\" style=\"margin: 5px;\" /\u003e\n  \u003cimg src=\"https://github.com/yelmuratoff/draggable_panel/blob/main/assets/opened.png?raw=true\" width=\"200\" style=\"margin: 5px;\" /\u003e\n\u003c/div\u003e\n\n## 📌 Getting Started\nFollow these steps to use this package\n\n### Add dependency\n\n```yaml\ndependencies:\n  draggable_panel: ^1.3.1\n```\n\n### Add import package\n\n```dart\nimport 'package:draggable_panel/draggable_panel.dart';\n```\n\n## Easy to use\n\n### Instructions for use:\n\nSimple add `DraggablePanel` to `MaterialApp`'s `builder`.\n\n```dart\nbuilder: (context, child) {\n  return DraggablePanel(\n    items: [\n      DraggablePanelItem(\n        enableBadge: false,\n        icon: Icons.color_lens,\n        onTap: (context) {},\n        description: 'Color picker',\n      ),\n      DraggablePanelItem(\n        enableBadge: false,\n        icon: Icons.list,\n        onTap: (context) {},\n      ),\n      DraggablePanelItem(\n        enableBadge: false,\n        icon: Icons.zoom_in,\n        onTap: (context) {},\n      ),\n      DraggablePanelItem(\n        enableBadge: false,\n        icon: Icons.token,\n        onTap: (context) {},\n      ),\n    ],\n    buttons: [\n      DraggablePanelButtonItem(\n        icon: Icons.copy,\n        onTap: (context) {},\n        label: 'Push token',\n        description: 'Push token to the server',\n      ),\n    ],\n    child: child!,\n  );\n},\n```\n\n### Using a controller (recommended for advanced control)\n\nCreate a controller once and pass it to the widget. You can preset position/state and listen to position changes.\n\n```dart\nfinal controller = DraggablePanelController(\n  initialPosition: (x: 20, y: 300),\n  // initialPanelState: PanelState.open, // optional: start opened\n);\n\n@override\nvoid initState() {\n  super.initState();\n  controller.addPositionListener((x, y) {\n    // persist position, analytics, etc.\n  });\n}\n\n// In MaterialApp.builder\nbuilder: (context, child) =\u003e DraggablePanel(\n  controller: controller,\n  onPositionChanged: (x, y) {\n    // Called when position settles (not during active dragging)\n  },\n  items: const [],\n  buttons: const [],\n  child: child!,\n),\n```\n\nTips:\n- When the panel starts in the closed state (default), it will be docked to the nearest screen edge on first layout, so the button never “floats” mid-screen.\n- The widget doesn’t auto-toggle on mount. Use `controller.toggle(context)` when you need to programmatically open/close it.\n- Position callbacks: use `controller.addPositionListener` for all position updates; `onPositionChanged` is fired when not dragging (settled updates).\n\nPlease, check the [example](https://github.com/yelmuratoff/draggable_panel/tree/main/example) for more details.\n\n\u003cbr\u003e\n\u003cdiv align=\"center\" \u003e\n  \u003cp\u003eThanks to all contributors of this package\u003c/p\u003e\n  \u003ca href=\"https://github.com/yelmuratoff/draggable_panel/graphs/contributors\"\u003e\n    \u003cimg src=\"https://contrib.rocks/image?repo=yelmuratoff/draggable_panel\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\u003cbr\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyelmuratoff%2Fdraggable_panel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyelmuratoff%2Fdraggable_panel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyelmuratoff%2Fdraggable_panel/lists"}