xtal_dashboard

A grid-based dashboard layout library for Flutter with drag-and-drop reordering, resizing, and physics-based spring animations.

Features

Grid layout — Fixed-column grid with configurable gap, padding, and cell aspect ratio.
Drag-and-drop — Long-press to reorder items with swap or move strategies.
Resize — Edge and corner handles for multi-directional resizing with min/max constraints.
Spring animations — Smooth layout transitions driven by critically damped or underdamped spring physics.
Shelf / dock — Temporarily park items in a configurable shelf area with animated entry and exit.
Auto-scroll — Automatic scrolling when dragging items near viewport edges.
Ghost widget — Customizable overlay shown during drag and resize operations.
Collision detection — Optional overlap prevention during reorder.
Pure Flutter — No external dependencies beyond the Flutter SDK.

Getting Started

flutter pub add xtal_dashboard

Usage

import 'package:xtal_dashboard/xtal_dashboard.dart';

XtalDashboard(
  columns: 4,
  items: [
    DashboardItemData(
      gridItem: GridItem(id: 'a', column: 0, row: 0, columnSpan: 2, rowSpan: 1),
      builder: (context, isBeingDragged) => const ColoredBox(color: Colors.blue),
    ),
    DashboardItemData(
      gridItem: GridItem(id: 'b', column: 2, row: 0),
      builder: (context, isBeingDragged) => const ColoredBox(color: Colors.green),
    ),
  ],
  gap: 8,
  padding: EdgeInsets.all(8),
  onItemsChanged: (items) {
    // Called after drag-and-drop or resize completes.
  },
)

See the example for a full demo with shelf, custom ghost, resize, and auto-scroll.

Configuration

Class	Purpose
`GestureConfig`	Long-press duration, resize handle size, drag/resize toggle, auto-scroll config.
`AnimationConfig`	Spring stiffness and damping for layout transitions.
`ResizeConstraints`	Min/max column and row span limits.
`ShelfConfig`	Shelf position, size, spacing, colors, and border customization.
`AutoScrollConfig`	Edge threshold and maximum scroll speed during drag.

License

MIT — see LICENSE for details.