https://github.com/yelmuratoff/draggable_panel
A versatile and customizable Draggable Panel
https://github.com/yelmuratoff/draggable_panel
draggable draggable-panel floating-button floating-panel panel
Last synced: 8 months ago
JSON representation
A versatile and customizable Draggable Panel
- Host: GitHub
- URL: https://github.com/yelmuratoff/draggable_panel
- Owner: yelmuratoff
- License: mit
- Created: 2024-12-17T19:46:45.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-10-15T07:22:21.000Z (8 months ago)
- Last Synced: 2025-10-15T15:39:23.607Z (8 months ago)
- Topics: draggable, draggable-panel, floating-button, floating-panel, panel
- Language: Dart
- Homepage: https://pub.dev/packages/draggable_panel
- Size: 533 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
A versatile and customizable Draggable Panel 🚀
DraggablePanel 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.
Your feedback is highly valued as it will help shape future updates and ensure the package remains relevant and useful. 😊
Show some ❤️ and star the repo to support the project!
## 📜 Showcase
## 📌 Getting Started
Follow these steps to use this package
### Add dependency
```yaml
dependencies:
draggable_panel: ^1.3.1
```
### Add import package
```dart
import 'package:draggable_panel/draggable_panel.dart';
```
## Easy to use
### Instructions for use:
Simple add `DraggablePanel` to `MaterialApp`'s `builder`.
```dart
builder: (context, child) {
return DraggablePanel(
items: [
DraggablePanelItem(
enableBadge: false,
icon: Icons.color_lens,
onTap: (context) {},
description: 'Color picker',
),
DraggablePanelItem(
enableBadge: false,
icon: Icons.list,
onTap: (context) {},
),
DraggablePanelItem(
enableBadge: false,
icon: Icons.zoom_in,
onTap: (context) {},
),
DraggablePanelItem(
enableBadge: false,
icon: Icons.token,
onTap: (context) {},
),
],
buttons: [
DraggablePanelButtonItem(
icon: Icons.copy,
onTap: (context) {},
label: 'Push token',
description: 'Push token to the server',
),
],
child: child!,
);
},
```
### Using a controller (recommended for advanced control)
Create a controller once and pass it to the widget. You can preset position/state and listen to position changes.
```dart
final controller = DraggablePanelController(
initialPosition: (x: 20, y: 300),
// initialPanelState: PanelState.open, // optional: start opened
);
@override
void initState() {
super.initState();
controller.addPositionListener((x, y) {
// persist position, analytics, etc.
});
}
// In MaterialApp.builder
builder: (context, child) => DraggablePanel(
controller: controller,
onPositionChanged: (x, y) {
// Called when position settles (not during active dragging)
},
items: const [],
buttons: const [],
child: child!,
),
```
Tips:
- 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.
- The widget doesn’t auto-toggle on mount. Use `controller.toggle(context)` when you need to programmatically open/close it.
- Position callbacks: use `controller.addPositionListener` for all position updates; `onPositionChanged` is fired when not dragging (settled updates).
Please, check the [example](https://github.com/yelmuratoff/draggable_panel/tree/main/example) for more details.
Thanks to all contributors of this package
