flutter_multi_split_layout #

A Flutter widget for creating resizable, multi-panel split layouts — similar to VS Code or IDE-style panel systems. Users can split panels horizontally or vertically, drag dividers to resize, and remove panels. The layout state can be serialized to/from JSON.

Features #

• Split panels horizontally or vertically at any depth
• Drag-to-resize dividers between panels
• Remove panels with a single click
• Edit / View mode — disable editing for end-users with isEditable: false
• JSON serialization — save and restore the full layout tree
• Customizable appearance — divider color, thickness, hover color, panel border color, and border radius

Getting started #

Add the dependency to your pubspec.yaml:

dependencies:
  flutter_multi_split_layout: ^0.0.1

Then run:

flutter pub get

Usage #

Basic example #

import 'package:flutter_multi_split_layout/flutter_multi_split_layout.dart';

class MyScreen extends StatefulWidget {
  const MyScreen({super.key});

  @override
  State<MyScreen> createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  final controller = LayoutController();

  @override
  Widget build(BuildContext context) {
    return MultiSplitLayout(
      controller: controller,
      itemBuilder: (context, contentId) {
        return Center(child: Text(contentId ?? 'Empty panel'));
      },
    );
  }
}

Customizing appearance #

MultiSplitLayout(
  controller: controller,
  dividerThickness: 6.0,
  dividerColor: Colors.blueGrey,
  hoverColor: Colors.red,
  leafBorderColor: Colors.grey.shade200,
  borderRadius: 8.0,
  itemBuilder: (context, contentId) {
    return MyContentWidget(id: contentId);
  },
);

View-only mode (no editing) #

MultiSplitLayout(
  controller: controller,
  isEditable: false,
  itemBuilder: (context, contentId) => MyContentWidget(id: contentId),
);

Save and restore layout from JSON #

// Save
final Map<String, dynamic> json = controller.toJson();

// Restore
final restoredController = LayoutController.fromJson(json);

Programmatic control #

// Split a specific panel
controller.splitNode('root', Axis.horizontal);

// Update divider ratio (0.0 – 1.0)
controller.updateRatio('root_split_123', 0.35);

// Remove a panel
controller.removeNode('root_1_123');

API Reference #

MultiSplitLayout #

LayoutController #

LayoutNode (models) #

• LeafNode — a single panel with an optional contentId
• SplitNode — contains two child nodes, a split direction, and a ratio

Example app #

A full example is available in the /example directory. It demonstrates:

• Splitting panels in both directions
• Admin/Client mode toggle (isEditable)
• Printing the current layout as JSON

License #

MIT — see LICENSE.