draggable_panel 1.3.1

A versatile floating panel widget that can be dragged around the screen and docked to edges. Perfect for displaying tools, actions, or additional content on demand.

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

dependencies:
  draggable_panel: ^1.3.1

Add import package

import 'package:draggable_panel/draggable_panel.dart';

Easy to use

Instructions for use:

Simple add DraggablePanel to MaterialApp's builder.

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.

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 for more details.

Thanks to all contributors of this package