drag_split_panels 1.0.1

A resizable, drag-to-divide split view widget for Flutter.

drag_split_panels

A resizable, drag-to-divide split view widget for Flutter. Arrange panels horizontally or vertically, separated by draggable dividers, with optional grip handles, min/max size clamping, and double-tap-to-reset.

Works on Android, iOS, Web, Windows, macOS, and Linux — pure Dart/Flutter widgets, no platform channels.

Usage

import 'package:flutter/material.dart';
import 'package:drag_split_panels/drag_split_panels.dart';

MultiSplitView(
  axis: Axis.horizontal,
  showHandle: true,
  children: [
    MultiSplitViewPanel(
      id: 'sidebar',
      defaultSize: 0.25,
      minSize: 0.1,
      maxSize: 0.5,
      child: const ColoredBox(color: Colors.indigo),
    ),
    MultiSplitViewPanel(
      id: 'main',
      defaultSize: 0.75,
      minSize: 0.3,
      child: const ColoredBox(color: Colors.teal),
    ),
  ],
)

Nest another MultiSplitView inside a panel's child to split in the other direction. See example/lib/main.dart for a runnable demo, including a nested horizontal + vertical layout.

Controlling sizes programmatically

Pass a MultiSplitViewController to read or observe panel sizes:

final controller = MultiSplitViewController();

MultiSplitView(
  controller: controller,
  children: [...],
);

controller.addListener(() {
  print(controller.panelsInfo.map((p) => p.size));
});

Panel sizing rules

• defaultSize, minSize, and maxSize are fractions of the group's total extent, in [0, 1].
• A group's panel sizes always sum to 1.0.
• Dragging a divider resizes its two adjacent panels first, cascading overflow to further panels once a neighbor hits its minSize/maxSize.
• Double-tapping a divider resets its two adjacent panels to their defaultSize (configurable via resetOnDoubleTap/onDividerDoubleTap).

License

MIT