> floating_menu_expendable_

floating_menu_expendable

A draggable floating handle that opens a customizable panel (side or vertical).

v1.1.1 MIT #Menu#Floating#Draggable#Overlay#UI
5
LIKES
67
DOWNLOADS
100%
HEALTH
160/160
POINTS
View on pub.dev_ GitHub_
> Overview_

Overview

A draggable floating handle that opens a customizable panel (side or vertical).

قائمة عائمة قابلة للسحب تفتح لوحة قابلة للتخصيص.. صُممت لتكون سهلة الاستخدام مع واجهة API بسيطة وواضحة، ومُحسّنة للأداء العالي.

> Platforms_

Platforms

iOSAndroidWebmacOSLinuxWindows
> Features_

Features

Draggable and snaps to the nearest screen edge
Two open modes:
`FloatingMenuExpendableOpenMode.side`: panel opens horizontally next to the handle
`FloatingMenuExpendableOpenMode.vertical`: panel opens below the handle (or above if near bottom)
Background barrier with blur + color, dismissible on tap
UI customization via `FloatingMenuExpendableStyle`
`FloatingMenuExpendableController` for open/close/toggle and side tracking
Expand from the handle (unified handle + panel) using `expandPanelFromHandle`
Switch handle content while open using `handleOpenChild` (defaults to a close icon)
Anchored overlay for grid/list items using `FloatingMenuAnchoredOverlay` (does not affect layout)
The panel is rendered in an `Overlay` and stays anchored to the child.
If you want the visual effect of "the item expands", set `expandFromAnchor: true`.
The rest of the UI is dimmed/blurred using a barrier.
When `closeOnScroll: true`, a scroll/pan gesture on the barrier will close the overlay.
`controller.physicalSide` (left / right)
`controller.verticalSide` (top / bottom) when using vertical mode
The widget is intended to be used inside a `Stack`.
Provide your own `panelChild` and `handleChild` to match your app UI.
> Installation_

Installation

$ flutter pub add floating_menu_expendable

dependencies:
  floating_menu_expendable: ^1.1.1
> Quick Start_

Quick Start

final controller = FloatingMenuExpendableController();

Stack(
  children: [
    FloatingMenuExpendable(
      controller: controller,
      panelWidth: 320,
      panelHeight: 240,
      handleChild: const Icon(Icons.menu),
      panelChild: const ColoredBox(color: Colors.white),
    ),
  ],
)
floating_menu_expendable preview
> Usage_

Usage

// Expand from handle
FloatingMenuExpendable(
  controller: controller,
  panelWidth: 320,
  panelHeight: 240,
  expandPanelFromHandle: true,
  handleOpenChild: const Icon(Icons.close_rounded),
  handleChild: const Icon(Icons.menu),
  panelChild: const ColoredBox(color: Colors.white),
)

// Customize style
FloatingMenuExpendable(
  ...
  style: const FloatingMenuExpendableStyle(
    showBarrierWhenOpen: true,
    barrierDismissible: true,
    barrierColor: Color(0x66000000),
    panelBorderRadius: BorderRadius.all(Radius.circular(18)),
  ),
)
> Floating Menu Expendable_

Floating Menu Expendable

final anchoredController = FloatingMenuAnchoredOverlayController();

FloatingMenuAnchoredOverlay(
	controller: anchoredController,
	expandFromAnchor: true,
	closeOnScroll: true,
	panelBuilder: (context) {
		return Material(
			color: Colors.white,
			borderRadius: const BorderRadius.all(Radius.circular(16)),
			child: SizedBox(
				width: 220,
				child: Padding(
					padding: const EdgeInsets.all(12),
					child: Column(
						mainAxisSize: MainAxisSize.min,
						crossAxisAlignment: CrossAxisAlignment.start,
						children: [
							const Text('Actions'),
							const SizedBox(height: 8),
							TextButton(
								onPressed: anchoredController.close,
								child: const Text('Close'),
							),
						],
					),
				),
			),
		);
	},
	child: GestureDetector(
		onTap: anchoredController.toggle,
		child: const Card(child: SizedBox(height: 120)),
	),
)
> Quick usage_

Quick usage

final controller = FloatingMenuExpendableController();

Stack(
	children: [
		FloatingMenuExpendable(
			controller: controller,
			panelWidth: 320,
			panelHeight: 240,
			handleChild: const Icon(Icons.menu),
			panelChild: const ColoredBox(color: Colors.white),
		),
	],
)
> Expand from handle (new)_

Expand from handle (new)

FloatingMenuExpendable(
	controller: controller,
	panelWidth: 320,
	panelHeight: 240,
	expandPanelFromHandle: true,
	// Optional: what to show inside the handle when open.
	handleOpenChild: const Icon(Icons.close_rounded),
	handleChild: const Icon(Icons.menu),
	panelChild: const ColoredBox(color: Colors.white),
)
> Customize the UI (Style)_

Customize the UI (Style)

FloatingMenuExpendable(
	controller: controller,
	panelWidth: 320,
	panelHeight: 240,
	handleChild: const Icon(Icons.menu),
	panelChild: const ColoredBox(color: Colors.white),
	style: const FloatingMenuExpendableStyle(
		// Background barrier
		showBarrierWhenOpen: true,
		barrierDismissible: true,
		barrierColor: Color(0x66000000),
		barrierBlurSigmaX: 10,
		barrierBlurSigmaY: 10,

		// Panel
		panelBorderRadius: BorderRadius.all(Radius.circular(18)),
	),
)
> Controller_

Controller

controller.open();
controller.close();
controller.toggle();
< Back to Libraries_